关键词：
1、流式布局（百分比布局） 案例：京东移动端
优点：简单方便，只需要固定高度，宽度自适应；
缺点：大屏幕手机实际显示的不协调。
2、响应式布局
优点：可以节约成本，不用再做专门的web app网站（外包公司、小公司、博客)；
缺点：工作量大、维护很难；国内大型企业在移动端很少用。
3、固定宽度 案例：荔枝FM 640
优点：与设备做等比例的缩放；
缺点：在大屏幕手机下两边留白，操作按钮小。
4、目前主流做法rem 案例：淘宝移动端
rem：font size of root element 相对于根目录字体的大小；
优点：能等比例的适配所有的屏幕，rem是根据html的font-size大小来变化的，基于这个出发，我们可以在任何一个设备下根据设备的宽度来设置html字号，从而实现自适应布局。
两种方案：
（1）rem随设备宽度做自适应，scale值固定为1；
（2）rem随设备宽度做自适应，viewport进行缩放，scale值不固定。
5、未来趋势
vw/vh 相对于viewport理想的视窗（设备）的比例；（目前兼容性较差）
1vw=10%设备宽度。
注：移动端基于标签meta
<meta name="viewport" content="width=device-width,initial-scale=1.0">
附：javascript获取设备宽度并设置根目录下字体大小的一种方法
！function(win){
var oHtml=win.document.documentElement; //获取html
var timer=null;
function changeRem(){
var width=oHtml.getBoundingClientRect().width; //获取设备的宽度，IE浏览器要做兼容处理
if(width>540){
width=540;
}
var rem=width/10;
oHtml.style.fontSize=rem+"px"; //设置根目录下字体大小
}
win.addEventListener("rasize",function(){
clearTimeout(timer);
timer=setTimeout(changeRem,300);
})
changeRem();
}(window);
懒人必备的移动端定宽网页适配方案
如今移动设备的分辨率纷繁复杂。以前仅仅是安卓机拥有各种各样的适配问题，如今iPhone也拥有了三种主流的分辨率，而未来的iPhone7可能又会玩出什么新花样。如何以不变应万变，用简简单单的几行代码就能支持种类繁多... 查看详情
移动端布局总结
移动端主流方案 1.单独制作移动端页面（主流）京东商城手机版淘宝触屏版苏宁易购手机版....2.响应式页面兼容移动端（其次）三星手机官网....移动端技术选型?流式布局（百分比布局）?flex弹性布局（推荐）?rem适配布局（... 查看详情
0075移动开发选择和技术解决方案：单独响应式normalize.cssborder-box移动端特殊样式
4.1移动端主流方案1.单独制作移动端页面（主流）通常情况下，网址域名前面加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。也就是说，PC端和移动端为两套网站，pc端是pc端的样式，移动端... 查看详情
08-移动端开发教程-移动端适配方案
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。1.常见的适配方案百分比+固定高度布局方案固定屏幕为理想视口宽度少许的媒体查询设置... 查看详情
移动端页面适配方案及原理(代码片段)
最近要接一个移动端的需求。类似歌曲排行榜的H5页。本人未雨绸缪，学习一波移动端适配方案。0.移动端vsPC端区别1.页面的三个视窗和缩放1.1layoutviewport和visualviewport:1.2idealviewport:1.3页面的缩放2.移动端适配2.1使用meta标签控... 查看详情
rem,vw,还是...?各凭本事的移动端适配方案(代码片段)
...假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章使用Flexible实现手淘H5页... 查看详情
m-移动端高清多屏适配方案
相关文档 rem 现在手机分辨率这么大，如何写响应式布局？ 查看详情
移动端font-size适配方案(续)
概述之前写过一篇移动端font-size适配方案，但是在实践过程中，还是发现当时的思维太局限了，视野太窄了，所以现在补充更新一下，记录下来，供以后开发时参考，相信对其他人也有用。我上一篇博文主要有2个误区，下面我... 查看详情
原创移动端高清多屏适配方案
移动端高清、多屏适配方案背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉... 查看详情
移动端屏幕适配解决方案
因原在做移动端适配过程中，一直都是应用淘宝的flexible高清方案解决，也没有认真的去研究过源码。这几天又看到一些普通的适配方案，于是把两者源码放在一起比较，发现高清方案是通过动态的获取了当前设备的dpr值，... 查看详情
移动端前端适配方案20170707
1.MeidaQueriesmeidaqueries 的方式可以说是我早期采用的布局方式，它主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是：@mediascreenand(max-width:600px){/*当屏幕尺寸小于600px时，应用下面的CSS... 查看详情
移动端适配js
移动端适配方案非常多，入行两年来始终没有一直使用一个标准，每个项目都按照业务需求来做适配方案一：最初听李彦辉老师的课程使用rem布局了一段时间，但是字体计算比较麻烦，也不太精确方案二：偶然在Q群里一群友分... 查看详情
移动端适配方案-rem(基础篇)
常见移动web适配方案一般有3种方法，如下图： ①：定高，宽度百分比（百分比适配简单，一般用来做一些适配性不高的页面，比如只有一些文字和图片等简单的屏幕适配） ②：flex（更多的用于复... 查看详情
手淘h5移动端适配方案flexible源码分析(代码片段)
移动端适配一直是一个值得探讨的问题，在业余时间我找了一些页面，查看了一些厂商对于移动端H5页面的适配方案，看到了几个典型的例子，今天就来记录一下我看到的第一个典型的例子，也是我们公司目前普通H5项目正在使... 查看详情
pc端移动端页面适配方案(代码片段)
前言 页面自适应PC端、移动端大体上可以分为两种： 1、在同一个页面进行自适应布局，通常使用CSS3 @media 媒体查询器实现 2、两套页面，在后端进行统一适配，根据不同的浏览器UA返回对应的页面 ... 查看详情
移动端开发适配的2中方案(代码片段)
原文地址：http://www.cnblogs.com/tugenhua0707/p/5568734.html针对移动端适配的方案~一：第一种方案是：所有的单位使用rem来适配；首先在页面上设置html的font-size的大小；如下我项目中的设置：htmlfont-size:100px;@media(min-width:320px)htmlfont-size:10... 查看详情
pc端移动端页面适配方案(代码片段)
...m/huanzi-qch/p/12053799.html 前言 页面自适应PC端、移动端大体上可以分为两种： 1、在同一个页面进行自适应布局，通常使用CSS3 @media 媒体查询器实现 2、两套页面，在后端进行统一适配，根据不同的浏览器... 查看详情
html移动端适配方案rem
为了做到一次开发的网页能够在不同尺寸的移动端设备上适配，我们需要使设计稿上标注的固定尺寸在不同设备上按照设备大小的比例显示不同的尺寸。比如设计稿是按照 IPhone6 的 750px 像素设计的，设计稿上的头... 查看详情