[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
- 前言
- 中文字体
- 移动Web适配方案
- !移动Web基础!
- 详解适配相关概念
- 移动开发之设计稿
- 移动适配方案（一）
- 移动适配方案（二）
- vw+rem 实现移动端布局
- 移动端适配之雪碧图(sprite)背景图片定位
- 适配 iPhoneX
- 前端开发实战
- 打造自己的前端开发流程（Gulp）
- flexible.js案例讲解
- viewport 与 flexible.js解读
- 图片与字体
- 踩过的坑
- 浏览器默认样式
- 300ms点击延迟和点击穿透
- ios css
- CSS 常见问题
- Ionic v1混合开发
- Native App、Web App 、Hybrid App？
- ionic项目结构
- 混淆加密
- 解决问题
- cordova
- 环境配置
- 打包发布
- 问题
- 移动前端开发优化
- Web开发之抓包
- ===web移动开发资源===
- H5组件框架
- 调试集合
- 简单h5调试
- whistle
- devtools-pro