关键词：
常见移动web适配方案一般有3种方法，如下图：
①：定高，宽度百分比（一般用来做一些适配性不高的页面，比如主要以一些文字和图片为主的网页或移动端的头部和底部）
②：flex （更多的用于复杂页面的布局。具体参照阮一峰大神写的-Flex 布局教程：语法篇和实例篇
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool （语法篇）
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html （实例篇）
③：媒体查询（css3 media媒体查询器用法总结：http://www.bubuko.com/infodetail-268180.html
注：flex布局和媒体查询以及接下来要讲的rem都可以实现移动端的日常响应式开发
推荐使用flex布局或rem来实现移动端的响应式开发，因为媒体查询要单独针对不同的分辨率写相应的样式，你懂得
Rem:（等比例缩放）【推荐】
以下是我在学习rem的过程当中看过的2篇写得比较好的文章，内容易理解，也比较全面，适合入门。
看完以后，对rem就了解得差不多了，所以就不再赘述。
https://www.jianshu.com/p/b00cd3506782 手机端页面自适应解决方案—rem布局基础篇
https://www.jianshu.com/p/985d26b40199 手机端页面自适应解决方案—rem布局进阶版
补充：（字体大小建议根据实际情况来决定使用rem或px）
|
rem一般用于设置根元素字体大小，1rem就是html根元素的字体大小，2rem就是html字体大小的2倍，1.5rem是html字体的1.5倍，0.75rem则是html字体大小的四分之三，依此类推。 因此，rem是一个相对长度单位，当改变html根元素的字体大小时，所有以rem为单位的都会随之放大或缩小。 首先你需要知道rem是指页面根元素的字体大小，即html的font-size，默认情况下，html的font-size是16px，相当于1rem = 16px; 但有一种情况需要考虑，即：如果rem被改变时。比如你引入的第三方UI组件或插件中设置了html的font-size:100px; 那么此时的1rem = 100px;会覆盖浏览器默认的1rem = 16px; 如果引入第三方UI组件或插件单位用的px，还需要全部转换成rem |
第130天：移动端-rem布局
...相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单，关键在于对不同设备的适配。之前介绍了一篇关于移动端rem布局方案，这大致是网易H5的适配方案。不过实践中发现淘宝开源的可伸缩布局... 查看详情
rem,vw,还是...?各凭本事的移动端适配方案(代码片段)
...假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章使用Flexible实现手淘H5页... 查看详情
移动端高清多屏适配方案——rem
背景：开发移动端H5页面一套设计图不同尺寸的手机不同分辨率的手机方案：使用rem作为单位解决一套设计图适应不同分辨率，不同尺寸的手机。概念：REM(fontsizeoftherootelement).相对于<html>的font-size的计算方式。dpr(devicepixelrati... 查看详情
html移动端适配方案rem
为了做到一次开发的网页能够在不同尺寸的移动端设备上适配，我们需要使设计稿上标注的固定尺寸在不同设备上按照设备大小的比例显示不同的尺寸。比如设计稿是按照 IPhone6 的 750px 像素设计的，设计稿上的头... 查看详情
基于rem的移动端响应式适配方案(详解)移动端h5页面的设计稿尺寸大小规范
基于rem的移动端响应式适配方案(详解)： https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.com/v/53039.html 查看详情
rem移动端适配方案(代码片段)
一、remvsem 单位定义特点remfontsizeoftherootelement以根元素字体大小为基准emfontsizeoftheelement以父元素字体大小为基准 二、js计算为了避免造成因为动态设置<html>元素的font-size而造成页面抖动，一般这部分代码我... 查看详情
移动端适配js
移动端适配方案非常多，入行两年来始终没有一直使用一个标准，每个项目都按照业务需求来做适配方案一：最初听李彦辉老师的课程使用rem布局了一段时间，但是字体计算比较麻烦，也不太精确方案二：偶然在Q群里一群友分... 查看详情
移动端适配方案(代码片段)
首先，我们需要知道rem和em的基本概念。rem:相对于html根元素的fontsize。em:相对于当前元素的字体大小。rem和em都能够根据屏幕大小做适配。 一、假设现在给出我们一张750px的设计图，我们在设计图上量出200px*200px的div大小，并... 查看详情
还在用rem做移动端适配？最新移动端适配方案vw,vh了解一下！(代码片段)
vw,vh都是相对于屏幕视口的单位。vw:相对于视口的宽度。视口被均分为100单位的vw；vh:相对于视口的高度。视口被均分为100单位的vh；vmax:相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax；vmin:相对于... 查看详情
移动端适配的问题
1.如何适配？想要在移动端的不同尺寸设备间做适配，使得页面布局可以等比例缩放。于是我立刻想到了百分比布局和rem布局。百分比布局无法适配性定高，只能用px定死，显然这是无法接受的。rem布局不是响应式布局方案，它... 查看详情
移动端适配方案以及rem和px之间的转换
背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：1... 查看详情
移动端布局最佳实践（viewport+rem）
通过前几天写的两篇博客(浅谈移动端三大viewport和移动端em和rem区别)，我们现在来总结一下如何实现一个最佳方案。之前在第二篇博客中提到过我们可以使用媒体查询来针对不同设备及做适配，如下图但是这个可能不会... 查看详情
vue移动端适配方案.md(代码片段)
移动端主要采用rem布局，vue+webpack，通过webpack编译，将css中px自动转成rem或其它单位，这里采用px2rem-loader进行转换，最后引入lib-flexible，实现不同设备不同分辨率的弹性适配。实现步骤第一步：引入lib-flexible#下载lib-flexiblenpmilib-... 查看详情
移动端适配rem(代码片段)
.../2即可。如果是小程序，不需要除以2。htmlfont-size:26.66vw;//移动端适配这里使用rem+vw方案省去媒体查询第二种：媒体查询按照750设计稿，根元素是100px，兼容性比较好。htmlfont-size:625%;/*100÷16×100%=625%*/@mediascreenan 查看详情
对移动端适配自己的理解
在写移动端H5页面的时候，最让人头疼的就是适配问题：接下来是我给我的最佳的解决方案和一个小例子第一步：适配js(rem.js)/***这里我们提取了一个公式(rem表示基准值)*rem基准值=document.documentElement.clientWidth*dpr/10*如果有一个区... 查看详情
h5在移动端尺寸适配方案
参考技术A要使用rem，就要设置rootfontsize，一般我们设置rootfontsize等于设计稿宽度的十分之一就可以了。比如750px宽度的设计稿，设置rootfontsize为75px即可。也就是说1rem=75px首先要根据页面尺寸变化，设置rootfontsize，然后根据设计... 查看详情
为什么说移动端该放弃rem适配方案了？
...真原文：https://juejin.cn/post/70849266460330557521.背景在做移动端各种尺寸屏幕的适配时，用的最多的就是rem方案。我们都写过这样的代码,来设置根字体大小。这个计算公式中设备宽度，UI设计稿尺寸这两个参数比较好理解&... 查看详情
移动端适配方案：js实现动态改变根元素的字体大小
参考技术A通过js动态获取屏幕的宽度（document.clientWidth）然后根据屏幕宽度动态计算出rem的实际值。假设，640px的设备1rem=100px公式：rem=document.clientWidth/640*100px; 查看详情