0 tl;dr其实也没啥原理，就是一个比例问题。1 前置知识设备独立像素（DIP）：一种抽象的像素，与实际物理像素之间的比值就是DPR。简而言之，一个设备独立像素实际上可以由\(1\times1\),\(2\times2\),\(3\times3\)...等任意多个物理像素来表现，取决于设备的设置。而应用一般并不需要实际与物理设备打交道，只与设备独立像素打交道。理想视口：布局视口等于设备独立像素宽
近期项目需要，移动端使用rem单位布局，我之前一直用vw和vh单位，用这也能实现，没啥毛病，但是公司领导让换单位，咱也得改是吧，下面是从网易，淘宝等大厂抄的作业：...
原创
2022-09-14 16:40:25
198阅读
11111111111111111
原创
2022-12-21 10:14:56
78阅读
前端开发中，需要在各种不同屏幕尺寸大小的设备上运行页面，所以就需要进行移动端适配一般有一下几种方法：（）媒体查询media：代码冗余（）百分比布局：图片之类的会乱（）弹性布局flex:高度固定，宽度自适应，天猫用的这玩意（）rem+viewport：这个计算比较复杂，淘宝用的就是这玩意rem是什么？移动端布局用的最多的就是rem啦，rem就是相对元素根节点的字体大小的单位，其实就是一个
<script> !function(n){//rem var e=n.document,//document t=e.documentElement,//body i=750,//设计稿宽度 d=i/100,//100px=1rem d:代表页面的总宽（rem）；750宽度时font-size为1 Read More
转载
2020-04-29 14:29:00
147阅读
2评论
介绍cube-ui是一个基于Vue.js实现的移动端组件库，它是由滴滴内部组件库精简提炼出来的，追求接近原生的体验！ 特性质量可靠由滴滴内部组件库精简提炼而来，经历了业务一年多的考验，并且每个组件都有充分单元测试，为后续集成提供保障。体验极致以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致。标准规范遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加
只是想把最近移动平台web开发的一点经验和大家分享下。 1.iScroll控件 这个控件可以说是非常不错的一个使用mobile webkit开发的一个实现滑动效果的控件。 它是纯粹的js写的，不依赖其它js框架。下面几个例子是在ipad的Safari的效果： 轮播图： 滑动效果(类似于新浪微博的客户端，向上
如今手机已经成为人们的主要沟通工具了，在互联网发展的现阶段，人们也越来越依赖于移动设备，那么对于程序员来说，我们要做的产品、项目最多的也是移动端的app，那么在开发阶段中，我们如何测试移动端网页呢？有人说在手机上直接测试，这样的操作对于程序员来说是很麻烦的，也比较浪费效率，因为我们要修改一个语法就要启动一次手机测试，效率相对就比较低，那么如何在pc上进行移动端网页的测试呢，今天给大家提供以下几种方
一、vw, vhvw它是根据可视区的宽度来计算的。vh它是根据可视区的高度来计算的。<body>
<style>
body { margin:0; }
.testDiv { width:100vw; height:100vh; font-size:10vw; background:#ccc; }
</style>
<div class="testDiv
一、背景在使用 vue-cli 构建移动端项目的时候，移动端自适应应该是很常见的需求了，之前见过有直接在 html 文件head 标签内添加 rem 设置的，这里分享一下使用淘宝的 lib-flexible 和 px2rem-loader 配合 vue-cli 构建的项目配置移动端自适应。话不多说，上方案，有问题希望大家多提问题和其他方案！！！！！二、方案方案一、rem + 根font-size设
本文主要写给刚接触移动端开发的同鞋们。首先先将几个主要概念讲一下；什么是移动端？移动端故名思义是为移动终端，大名叫移动通信终端，是指可以在移动中使用的计算机设备。其实就是我们常说的手机。什么是布局？前端开发中布局是将主要的html结构布置好。rem是什么？rem是一种长度单位，是而且仅是根据根元素html改变的长度单位。Root em（REM）是CSS3中新定义的一种长度单位。和之前的em(根据父
转载
2021-05-04 21:38:26
1320阅读
2评论
使用rem适配移动端在main.js设置字体大小//以屏幕宽度为375为例const winWidth = window.innerWidth;//获取屏幕宽度c
常用的解决移动端布局的方案大概有：1.flex弹性布局1）高度定死，宽度自适应，元素都采用px做单位。2）随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在哪个宽度需要调整的时候使用响应式布局调调就行（比如网易新闻），这样就实现了『适配』。2.百分比3.用框架搭建页面4.viewport适配4.1 优点：1）避免复杂的计算，直接使用UI的标准像素值4.2 缺点：2）不能使用m
前言在移动端页面开发过程中避免不了对页面做适配，适配方案说多还是挺多的，接下来主要讨论一下rem和em。兼容性ios：6.1系统以上都支持android：2.1系统以上都支持大部分主流浏览器都支持，可以安心的使用~一、remrem是基于页面根元素html字体大小来设置，例如给html元素设置font-size: 30px; p元素的font-size: 0.5rem;可以使用geComputedS
转载
2024-10-31 15:21:38
47阅读
/*file transfer文档传送程序*/
typedef struct{//本数组的类型是结构体。集合的每个元素直接用数组里的下标去代表即可，此时数据域可以不要，直接定义一个整型数组即可表示集合。
ElementType Data;//数组有个结构域Data对应的是集合的元素的具体类型 (任何想要的类型)
int Parent;//是个指针记录元素在数组里父结点的位置
}SetTy
document.documentElement.style.fontSize = innerWidth /16 +'px' window.onresize = function(){ document.documentElement.style.fontSize = innerWidth /16 +'px' } document.getElementsByTagN
原创
2021-06-30 11:58:19
470阅读
document.documentElement.style.fontSize = innerWidth /16 +'px' window.onresize = function(){ document.documentElement.style.fontSize = innerWidth /16 +'px' } document.getElementsByTagN
原创
2022-03-28 16:26:51
121阅读
rem是什么？ rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似
转载
2024-04-21 15:37:27
114阅读
Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 remlib-flexible 用于设置 rem 基准值下面我们分别将这两个工具配置到项目中完成 REM 适配。一、使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小）1、安装 # yarn a
转载
2024-05-20 12:33:33
405阅读
在页面引入这段js代码(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () {
原创
2021-06-29 10:17:13
94阅读
