关键词：
前言：移动端的适配是个大问题，特别是安卓，国内版本众多，不规则的dpr数不胜数，为了适配各种移动终端，网易、百度、阿里各大厂都有自己的适配解决方案。要解决哪些问题呢？
- 不同设备下的统一视觉体验。
- 不需要手动设置
viewport，根据当前环境计算出最适合的viewport。 - 支持任意尺寸的设计图，不局限于特定尺寸的设计图。
- 支持单一项目，多种设计图尺寸，专为解决大型，长周期项目。
- 支持
px2rem转换方法，CSS布局，原始值不丢失。 - 有效解决移动端1像素问题。
1、首推阿里的flexible适配方案，酷、靓、好用。阿里无线前端团队开发的，手淘的H5页面在使用。
github传送门：https://github.com/amfe/lib-flexible/
flexible详解：https://github.com/amfe/article/issues/17
flexible一个案例：http://huodong.m.taobao.com/act/yibo.html
2、墨尘大大写的hotcss，比flexible稍轻量，开发利器。
github传送门：https://github.com/imochen/hotcss
hotcss一个案例：http://imochen.github.io/hotcss/example/normal/
3、插件px2rem保留源文件px，将px转化成rem
npmjs传送门：https://www.npmjs.com/package/px2rem
配合gulp使用：gulp-px3rem https://www.npmjs.com/package/gulp-px3rem
配合webpack使用：px2rem-loader https://www.npmjs.com/package/px2rem-loader
m-移动端高清多屏适配方案
相关文档 rem 现在手机分辨率这么大，如何写响应式布局？ 查看详情
原创移动端高清多屏适配方案
移动端高清、多屏适配方案背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉... 查看详情
移动端高清多屏适配方案
背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：1... 查看详情
移动端高清多屏适配方案
背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：... 查看详情
08-移动端开发教程-移动端适配方案
...字体水平百分比布局水平方向部分也可以使用弹性布局Rem解决方案Rem的大小取值：根据页面的dpr动态改变Rem的取值：1rem=100px或者1rem=1/10*理想视口的宽度chrome浏览器 查看详情
移动端高清多屏适配方案——rem
背景：开发移动端H5页面一套设计图不同尺寸的手机不同分辨率的手机方案：使用rem作为单位解决一套设计图适应不同分辨率，不同尺寸的手机。概念：REM(fontsizeoftherootelement).相对于<html>的font-size的计算方式。dpr(devicepixelrati... 查看详情
移动端屏幕适配解决方案
因原在做移动端适配过程中，一直都是应用淘宝的flexible高清方案解决，也没有认真的去研究过源码。这几天又看到一些普通的适配方案，于是把两者源码放在一起比较，发现高清方案是通过动态的获取了当前设备的dpr值，... 查看详情
移动端适配方案以及rem和px之间的转换
背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：1... 查看详情
解惑好文：移动端h5页面高清多屏适配方案(转)
转自：http://mobile.51cto.com/web-484304.htmhttps://github.com/amfe/lib-flexible/blob/master/src/makegrid.jshttps://segmentfault.com/a/1190000006839117对于retina屏幕(如:dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也就是说像素点 查看详情
移动端高清适配方案（解决图片模糊问题1px细线问题）(代码片段)
本文介绍了移动端适配的3种方法，以及移动端图片模糊问题和1px细线问题的解决方法。当然了，在这之前先整理了与这些方法相关的知识：物理像素、设备独立像素、设备像素比和viewport。>>>>物理像素、设备独立... 查看详情
移动端适配的问题
1.如何适配？想要在移动端的不同尺寸设备间做适配，使得页面布局可以等比例缩放。于是我立刻想到了百分比布局和rem布局。百分比布局无法适配性定高，只能用px定死，显然这是无法接受的。rem布局不是响应式布局方案，它... 查看详情
探究移动端开发
什么使移动端开发呢？这就是在手机等移动端设备上的网页开发。并且现在手机上的app有一部分也是h5页面，对于Android系统的手机，我们打开手机上的开发者选项，开启显示布局边界，如果发现页面有布局则是native，否则是... 查看详情
移动端h5页面适配问题研究
...题过程中牵扯到的知识点，然后梳理分析目前常见的适配解决方案。由于本文内容较长，下面先给出文章的提纲：1.1理解移动端单位 1.2理解viewport2.1图片高清适配 2.2字体大小适配 2.3布局宽度适配---这里是分隔符，正文开始-... 查看详情
移动端页面适配
前端开发中，尤其移动端手机屏幕大小各异，该如何解决页面适配的问题呢？下面从几点进行了总结。1、设计稿的布局设计 我们在进行H5页面内容规划布局设计的时候，不能把重要的内容放在太偏下的位置或者偏上，否则前... 查看详情
移动端主流适配方案
1、流式布局（百分比布局） 案例：京东移动端优点：简单方便，只需要固定高度，宽度自适应；缺点：大屏幕手机实际显示的不协调。2、响应式布局优点：可以节约成本，不用再做专门的webapp网站（外包公司、小公司... 查看详情
移动端布局总结
移动端主流方案 1.单独制作移动端页面（主流）京东商城手机版淘宝触屏版苏宁易购手机版....2.响应式页面兼容移动端（其次）三星手机官网....移动端技术选型?流式布局（百分比布局）?flex弹性布局（推荐）?rem适配布局（... 查看详情
移动端页面布局
移动端页面布局一、移动端app分类1、NativeApp原生app手机应用程序 使用原生的语言开发的手机应用，Android系统用的是java，ios系统用的是object-C2、HybridApp混合型app手机应用程序 混合使用原生的程序和html5页面开发的手机应... 查看详情
移动端web页面适配方案（整理版）
参考技术A@(概述)[基本概念|百分比|rem|vw/vh|响应式设计]移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的... 查看详情