[TOC] # 多种方案 ## [PC及移动端页面适配方法](http://www.cnblogs.com/qijunjun/p/7152236.html) 设备有多种不同的分辨率，页面适配方案有如下几种： 1. 全适配：流体布局+响应式布局 2. 移动端适配： 使用百分比自适应布局（流式布局）同时需要对移动端的 `viewport` 视口进行设置，就可以达到适配的目的： 1. 流体布局+少量响应式（就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值） 2. 基于 `rem` 的布局 3. `flex`弹性合模型 这种界面有个特点就是页面元素的复杂度比较高，而使用 `flex` 进行布局会导致页面被拉伸，但是上下的高度却没有变化等问题。 淘宝最近开源的一个框架和网易的框架有同工之异。都是采用 `rem` 实现一稿解决所有设置自适应。在没出来这种方案之前，第一种做法的人数也不少。 ## 移动端布局终极解决方案 随着移动web的需求越来越多，当然伴随着的方案也多，但是大体都是和手淘同样的实现方案，来对应各种不同设备： 1. [淘宝弹性布局方案lib-flexible](https://github.com/amfe/lib-flexible) 2. [hotcss --- 让移动端布局开发更加容易](https://github.com/imochen/hotcss) 3. [https://github.com/cllgeek/godcss](https://github.com/cllgeek/godcss) ## 参考 > [移动端自适应方案](http://caibaojian.com/mobile-responsive-demo.html) > [自适应网页设计（Responsive Web Design）](https://www.w3cways.com/1243.html) > [【移动适配】移动Web怎么做屏幕适配（三）](https://segmentfault.com/a/1190000004562630) > [移动端H5解惑-概念术语（一）](https://github.com/sunmaobin/sunmaobin.github.io/issues/27) > [rem是如何实现自适应布局的？](http://caibaojian.com/web-app-rem.html) > [白树-【原】移动web资源整理](http://www.cnblogs.com/PeunZhang/p/3407453.html) > [jtyjty99999/mobileTech](https://github.com/jtyjty99999/mobileTech) > [zhiqiang21's Blog](https://github.com/zhiqiang21/blog/blob/master/README.md) # px、em 与 rem px 是相对固定单位，字号大小直接被定死，所以用户无法根据自己设置的浏览器字号而缩放，em 和 rem 虽然都是相对单位，但em是相对于它的父元素的`font-size`，页面层级越深，em的换算就越复杂，而 rem 是直接相对于根元素，这就避开了很多层级关系。移动端新型浏览器对 rem 的兼容很好，可以放心使用。 ## em **任意浏览器的默认字体高都是16px**。 **所有未经调整的浏览器都符合: `1em=16px`。** 那么`12px=0.75em`，`10px=0.625em`。为了简化 `font-size` 的换算，需要在 css 中的 body 选择器中声明`font-size=62.5%`，这就使 em 值变为 `16px*62.5%=10px`, 这样`12px=1.2em`, `10px=1em`, 也就是说只需要将你的原来的 px 数值除以 10，然后换上 em 作为单位就行了。 ## rem 然而，这里面有两个深坑： 1. 我看了网上很多关于 rem 的资料，基本都说浏览器的默认字号就是 16px ，然后直接定义 `font-size:62.5%` 。但是，rem 属于 css3 的属性，有些浏览器的早期版本和一些国内浏览器的默认字号并不是 16px，那么上面的 `10/16` 换算就不成立，直接给 html 定义 `font-size: 62.5%` 不成立。 2. chrome 强制字体最小值为 12px，低于 12px 按 12px 处理，那上面的 1rem=10px 就变成 1rem=12px，出现偏差（下面给demo）。 **解决方案**： 将 `1rem=10px` 换为 `1rem=100px`（或者其它容易换算的比例值）；不要在 pc 端使用 rem。 ~~~css 再用本工厂总结得出的各分辨率媒体查询换算： @media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) { html { font-size: 703%; } } @media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) { html { font-size: 732.4%; } } @media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) { html { font-size: 750%; } } @media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) { html { font-size: 781.25%; } } @media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){ html { font-size: 808.6%; } } @media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){ html { font-size: 843.75%; } } ~~~ # 手机端rem推荐的一种写法 ```css :root { font-size: 16px; } /* Or you can use html */ /* html { font-size: 16px; } */ body { font-size: 1rem; } button { font-size: 0.875rem; // All the internal/external value use in 'em' // This value use of your "font-size" as the basic font size // And you will not have any problem with the font size of the container ( Example bottom ) padding: .5em 1em; border: .125em solid #e3e3e3; @media (min-width: 48rem){ // min-width: 768px font-size: 1.125rem; } @media (min-width: 62rem){ // min-width: 992px font-size: 1.375rem; } } /* Example*/ .container { // font-size: 14px; font-size: .875rem; width: 80rem; button { font-size: .875rem; // Still use font-size: 14px padding: .5em 1em; border: .125em solid #e3e3e3; @media (min-width: 48rem){ // min-width: 768px font-size: 1.125rem; } @media (min-width: 62rem){ // min-width: 992px font-size: 1.375rem; } } } ``` # 移动端设计稿项目(尺寸640宽度) ``` html { font-size: 12px; } @media(min-width:319px) and (max-width: 359px) { html { font-size: 100px!important; /*1rem=100px*/ } } @media(min-width:360px) and (max-width: 399px) { html { font-size: 112.5px!important; /*1rem=112.5px*/ } } @media(min-width:400px) and (max-width: 639px) { html { font-size: 125px!important; /*1rem=125px*/ } } @media(min-width:640px) and (max-width: 768px) { html { font-size: 200px!important; /*1rem=200px*/ } } ``` # 前端页面适配的 rem 换算 http://www.cnblogs.com/zjzhang/p/6885790.html