# 1 前言 设计师交付给前端开发一张宽度为750px的视觉稿，设计稿上元素的尺寸、颜色、位置等已做过标注，要求工程师工在适配不同屏幕尺寸的设备时采用等比缩放的方案。...使用viewport缩放方案实现页面级的缩放适配。但该方案有个问题，1px的边框在大屏手机被放大后显得很粗，在小屏手机上被缩小后又显得太细。...可以使用动态REM方案。 # 2 原理 在使用单位控制页面元素大小时，可以使用固定单位px，也可以使用相对单位rem。2rem 等于html标签font-size的2倍。...基于这个原理，对于需要适配屏幕等比缩放的元素可以选用rem作为单位，对于不需要等比缩放的元素依旧使用px作为单位。...如果html的font-size 设置为 50*屏幕宽度/设计稿宽度，那么div的宽度就应该是7.5rem了。换算起来就没那么直观了。 # 3 适配代码 <!
setSize(); }(window, document) html 的 size = (设备的宽度 / 设计稿的尺寸) * 100% 比如设计稿是750px，有个按钮是 590px 换算之后就是 5.9rem
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text...
前面几篇移动端专区博文简单介绍了移动端的概述,以及简单的适配方案,百分比适配,比例缩放适配,viewport适配等,但是难免都有一些各种问题!...这次这个rem终极适配方案,是目前移动端的较为完美的适配方案!...简单介绍一下这个rem适配 px 固定值,设置多少就是多少不随屏幕大小改变 em 相对于自身字体大小 font-size:12px; 1em=12px em引发问题 1.chrome浏览器下规定字体最小...=12px,5rem=60px; 首先要去设置这个html(根节点的字体大小),rem是根据这个根节点的字体大小进行适配!...当然去适配的时候这个根节点的大小如何设置才能更好适配呢?
0.75rem; //12÷16=0.75（rem） } 使用rem这个字体单位进行适配，就是利用它作为一个全局字体固定参照单位的特性。...如果改变html元素的字体大小，rem的值也就跟着改变，对应的其他使用rem的布局尺寸，也会跟着改变，从而达到适配的目的，保证比例一致。...rem适配具体实现方案： 设计稿尺寸宽度为750px，如果设计稿是640px，下边js会自动计算rem的值（比如rem:75px -> rem: 64px），具体的尺寸rem不用调整（例如 padding...: 1.5rem，不用调整，这是一个比例大小），对应的元素大小px值会根据新的rem（比如rem: 64px, padding等于 1.5 * 64）改变，从而按照比例适配。...适配 doesn't work properly without JavaScript enabled.
1 /** 2 * 移动端自适应 3 */ 4 <meta name="viewport" 5 content="width=device-width,user-scalable...--maximum-scale=1.0 可视区域的放大级别--> 1 /** 2 * <em>rem</em><em>适配</em> iPhone5下html字号为100px，320px下1<em>rem</em>=100px
rem布局，在页面中引入这都js代码。...为什么是640px 对于手机屏幕来说，640px的页面宽度是一个安全的最大宽度，保证了移动端页面两边不会留白。注意这里的px是css逻辑像素，与设备的物理像素是有区别的。...此时1rem = 100px，那么上面的宽55px，高37px的元素样式就可以这么设置 ↓ width: 0.55rem;height: 0.37rem; 为什么不一开始把html的font-size设为...这样，页面中凡是应用了rem的作尺寸单位的元素都会随着页面变化而等比例缩放了！ 3. 有哪些情况可是使用rem布局？ 大部分情况下都可以使用rem布局，当然具体情况还要看情况而定。...大家可以看看淘宝的这个手机页面 淘宝手机站，基本就是这种感觉，底部导航和顶部搜索框用的高固定，宽自适应的方案，其余的部分基本都是随着浏览器宽度变化在等比例缩放。 最终页面代码首页代码大致如下 <!
rem介绍 rem（font size of the root element）是指相对于根元素（即html元素）的字体大小的单位。...假设根元素的字体大小是10px, 则5rem的大小为 5*10=50px,例如 html{ font-size: 10px; } p{ width: 2rem; /* 2*10 = 20px...;*/ margin: 1rem; } rem来做适配 以前我们往往这样做页面：viewport width 设置为 device-width，然后选我们需要兼容设备的最小宽度（一般是320px...为了能将设计稿中的 px 方便的转换为页面中 rem，我设置 1rem 为 宽度为 640px 的设计稿中的 100px。...在上一步中，1rem 为此时设计稿中 100px 的值。屏幕的宽度也就是 (640 / 100) = 6.4rem。
前言：GitHub：https://github.com/Ewall1106/mall 一、关于lib-flexible.js flexible方案是手淘经过多年的摸索和实战，总结出的一套移动端适配方案...，这里我推荐一篇w3c大漠老师的一篇文章使用Flexible实现手淘H5页面的终端适配，里面详细的讲解了该方案的使用和原理。...initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum=scale=1.0"> 4、安装cssrem插件 cssrem插件是一个把px转换为rem...的工具，GitHub：https://github.com/flashlizi/cssrem 为什么不安装px2rem-loader？...： 1a = 7.5px 1rem = 75px 所以我们进入vsc的首选项里面，把把html的font-size设置为75px： ?
前言 手机市场日渐丰富的同时，给我们前端开发人员带来的网页内容自适应屏幕尺寸进行显示的问题也日渐凸显出来。...这对于前端开发就开心了，什么适配都不用管，外部宽度就是牛逼的320px。典型的墨守成规、因循守旧、故步自封、抱残守缺做法，放在现在各种“大屏手机”上，用户量恐怕要分分钟损失80%。 ?...4. rem存在的问题 rem作为一种简单粗暴解决不同屏幕下视图的区别的一种方案，它可以解决本文出现的问题以及绝大多数移动端适配屏幕尺寸的问题。...从2011年至今，手上的手机屏幕宽度一直在提升，但是使用的看小说软件的显示字号几乎是不变的。使用rem会在一定程度上打破用户的文字内容阅读习惯，特别是在大篇幅的内容时。...而rem用在字号时，使字号在不同屏幕上的绝对尺寸不一致，违背了设计哲学。 大家感兴趣还可以移步结一老师的文章：rem不是神农草，治不了移动端百病。 5.
博客在手机打开一直不能适配，手机上访问的体验很不好。今天把博客的大部分页面都加了自适配手机端，只要修改每个页面的css 即可。 之前大概知道怎么去改，但是页面太多实在觉得麻烦，就一直没有去改。...= -1) { isMobile = true; alert("本博客手机打开不适配，建议使用电脑访问效果最佳！...css最烦的就是调来调去还差点的，特别是屏幕宽度，就很无语~ 手机适配的话先加个meta viewport。...移动端的布局不同于pc端，首先我们要知道在移动端中，css中的1px并不等于物理上的1px，因为手机屏幕的分辨率已经越来越高，高像素但是屏幕尺寸却没有发生太大变化，那就意味着一个物理像素点实际上塞入了好几个像素.../**手机适配**/ @media only screen and (max-width: 767px) { header{width:100%} .banner{width: 100%;height
rem 认识 优点： 可以适应不同大小的屏幕 使用px或者百分比布局不能实现： px单位时绝对单位 百分比布局是宽度自适应，高度固定的 rem使用 rem使用时需要配合: 媒体查询 flexible.js...; height: 2rem; background-color: red; } 注意： 如果电脑显示的缩放为125%，那么给媒体特性设置宽度时只设置手机型号的宽度不起作用...（因为电脑显示的手机宽度是 ：125%×真实手机宽度） 媒体特性常用写法 max-width 从小到大 min-width 从大到小 /* max-width 从小到大 min-widrh...4位 flexible 动态的检测手机大小，给网页中html根节点设置不同的font-size。...相比较媒体查询，优点： 减少代码量 适配所有类型手机 不用担心电脑显示的缩放 .box { /* 盒子大小: 宽 = 68 / 37.5
代码已上传至github github代码地址：https://github.com/Miofly/mio.git 最近发现之前写的移动端适配在部分华为或者三星手机上rem单位总是不兼容。...发现部分华为手机确实要比其他的大。 解决方法如下： 代码的中的375px是根据UI给出的设计图写的，如果是750的设计图就把所有的375数值都改成750即可。...最后根据UI给出的px单位除以一百得到rem的单位就可以适配移动端了。...})(document, window); 在实际开发时最好给body一个默认的font-size，防止个别字体很大 <body style="font-size: 0.05<em>rem</em>
前言 手机市场日渐丰富的同时，给我们前端开发人员带来的网页内容自适应屏幕尺寸进行显示的问题也日渐凸显出来。...这对于前端开发就开心了，什么适配都不用管，外部宽度就是牛逼的320px。典型的墨守成规、因循守旧、故步自封、抱残守缺做法，放在现在各种“大屏手机”上，用户量恐怕要分分钟损失80%。 ?...使用JS来获取屏幕宽度的好处在于可以100%适配所有的机型宽度，因为其元素的基准尺寸是直接算出来的。...4. rem存在的问题 rem作为一种简单粗暴解决不同屏幕下视图的区别的一种方案，它可以解决本文出现的问题以及绝大多数移动端适配屏幕尺寸的问题。...从2011年至今，手上的手机屏幕宽度一直在提升，但是使用的看小说软件的显示字号几乎是不变的。使用rem会在一定程度上打破用户的文字内容阅读习惯，特别是在大篇幅的内容时。
一、安装 npm install px2rem-loader lib-flexible --save 二、入口文件main.js加上 import ‘lib-flexible/flexible.js’...1.0, maximum-scale=1.0, minimum-scale=1.0"> 四、在build下的 utils.js中加上 const px2remLoader = { loader: ‘px2rem-loader
rem布局原理深度理解（以及em/vw/vh） 一、前言 我们h5项目终端适配采用的是淘宝那套《Flexible实现手淘H5页面的终端适配》方案。主要原理是rem布局。...； 2.3、vm/vh vw ：视口宽度的 1/100；vh ：视口高度的 1/100 —— MDN 在pc端，视口宽高就是浏览器得宽高； 在移动端，这个还不太一样，不过一般设置： <meta name...对，css不是有相对单位rem么？我们全可以实现借助rem代替上面的a。...所以在Flexible整个适配方案中，考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。...五、rem布局方案 从上可以看出最好的弹性布局方案就是rem+js的方案，《Flexible实现手淘H5页面的终端适配》就是采用rem+js实现的。flexible主要做了几点。
适配方案 1.让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备。...2.使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也会发生变化，从而达到等比缩放的适配。...4.1 rem实际开发适配方案 ①按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小; ( 媒体查询) ②CSS中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为rem...为单位的值; 4.2 rem适配方案技术使用(市场主流) 技术方案1 rem 媒体查询 less 技术方案2 (推荐) flexible.js rem rem实际开发适配方案...rem值 = 页面元素值( px) / html font-size字体大小 rem适配方案2 简洁高效的rem适配方案flexible.js 手机淘宝团队出的简洁高效移动端适配库 我们再也不需要在写不同屏幕的媒体查询
rem 适配布局 rem 单位 rem 是根 em(root em)的缩写，是相对于根元素(html 元素)的字体大小。...手机平板等设备都用得到多媒体查询。...; height: 82 / 50rem; font-size: 100px; } rem 适配方案 目标 让一些不能等比自适应的元素，当设备尺寸发生改变时,等比例适配当前设备。...rem 实际开发适配方案 首先选一套标准尺寸 750 为准 动态设置 html 标签 font-size 大小 元素大小取值方法 ① 页面元素的 rem 值=页面元素值（px）/(屏幕宽度/划分的分数)...1： less 媒体查询 rem 插件 easy less rem 适配方案 2： flexible.js rem 插件 cssrem 参考： pink 老师前端入门教程
今天，我们使用Vue CLI3 做一个移动端适配 。 前言 首先确定你的项目是Vue CLI3版本以上的。...一、移动端适配包 1、安装移动端适配包 npm i lib-flexible -S 2、在main.js引入适配包 import Vue from ‘vue’ import App from ‘..../App.vue’ import ‘lib-flexible’ // 引入适配包 Vue.config.productionTip = false new Vue({ render: h => h(App...-- built files will be auto injected --> 二、CSS样式适配 1、安装px2rem-loader包（只适用于css样式） npm...i px2rem-loader -D 更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119116648
如仅是几个静态页面进行切换，那么可以用js进行判断跳转，如： 例子 有两个页面，分别是 index.html、index_m.html; index.html(假定电脑端) 添加如下 JavaScript...代码： if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { 跳转手机...其实就是反过来： if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { // 匹配手机.../ { root html/pc; # 电脑版,默认 if ($mobile_rewrite = perform) { root html/m; # 手机版...http://xxx.xxx; # 电脑版 if ($mobile_rewrite = perform) { proxy_pass http://xxx.xxx; # 手机版
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
