1. 其他

1.1 常用字级单位：px rem pt 百分比 em 等`

1.2 css媒介查询临界点（7个范围设置）

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

// 使用外链的方式 加载不同的css文件
<link rel="stylesheet" media="screen and (max-width:300px)" href="/skin/index.css">


常用屏幕尺寸
超小屏幕     手机 < 768px
小屏幕       平板 > 768px
中等屏幕     桌面显示器 > 992px
大屏幕       超大桌面显器 > 1200px

1.3 设计原则

文字流式（fluid）

控件弹性（flexible）

图片等比缩放（scale）

1.4 盒子边缘溢出：box-sizing:border-box

当我们指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。按照盒子模型，就会发现该元素的左右边框各1个像素会溢了，导致出现横向滚动条，这时候我们可以为其添加box-sizing:border-box用来指定该盒子的大小包括边框的宽度

1.5 IOS如何禁止页面在新窗口打开

在项目开发中，有时我们需要某个链接在当前页面打开，这样需要禁止用户在新窗口打开页面，我们可以使用a标签的target=”_self”指定在当前页面打开
但是在iOS中长按链接一段时间后，系统会弹出一个对话框，用户可以通过点击”在新页面中打开”来在新窗口打开页面，这样我们指定的target属性就失效了，但是可以通过指定当前元素的-webkit-touch-callout属性为none来禁止iOS弹出这些按钮

2. 移动端适配

2.1 方案一：元素尺寸使用px设置

采用弹性布局：文字流式（fluid）、控件弹性（flexible）、图片等比缩放（scale）
写一些简单的媒体查询，主要是针对iPhone4，比4分辨率大的设备肯定能显示根据4的尺寸做出来的东
iphon6设备宽的逻辑的像素是375px，iphone4的逻辑像素是320个像素

2.2 方案二(参考网易APP)：元素尺寸采用rem设置，除了font-size设置使用px

1. 设置body元素的宽度：

网易的设计稿是根据iPhone4或iPhone5设计的，所以设计稿竖着时的横向分辨率为640

当deviceWidth大于设计稿的横向分辨率时，html的font-size始终等于横向分辨率/body元素宽，此时应该让用户访问pc端页面

 如果设计稿基于iphone6，横向分辨率为750，body的width为750 / 100 = 7.5rem
 如果设计稿基于iphone4/5，横向分辨率为640，body的width为640 / 100 = 6.4rem

2. 动态设置html 的 font-size:

    var deviceWidth = document.documentElement.clientWidth;
    if(deviceWidth > 640) deviceWidth = 640;
    document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
    
    动态设置font-size结果展示：
    deviceWidth = 320，font-size = 320 / 6.4 = 50px
    deviceWidth = 375，font-size = 375 / 6.4 = 58.59375px
    deviceWidth = 414，font-size = 414 / 6.4 = 64.6875px
    deviceWidth = 500，font-size = 500 / 6.4 = 78.125px

3. 页面布局设置，设计图标注的尺寸除以100得到css中的尺寸

如果一个div的设计稿标注图是100px*50px，那么使用rem表示为：1rem*0.5rem

4. font-size可能需要额外的媒介查询，并且font-size不能使用rem，如网易的设置

font-size的大小是通过js计算出来的：所以当分辨率发生变化时，html的font-size就会变，不过这得在你调整分辨率后，刷新页面才能看得到效果

@media screen and (max-width:321px){
    .m-navlist{font-size:15px}}

@media screen and (min-width:321px) and (max-width:400px){
    .m-navlist{font-size:16px}}

@media screen and (min-width:400px){
    .m-navlist{font-size:18px}}

5. 视口设置

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

2.3 方案三（参考淘宝）：元素的尺寸使用rem设置，除了font-size使用px设

当设备竖着时横向物理分辨率大于1080时，此时应该让用户访问pc端页面

1. 视口设置

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

2. 动态设置视口的scale

var scale = 1 / devicePixelRatio; 
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

3. html元素的font-size的计算公式

font-size = deviceWidth / 10;
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'

4 元素的尺寸计算：设计稿标注尺寸/该设计稿对应的html的font-size

各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10
设计稿的标注尺寸：150px,该设计稿对应的html的font-size=750/10=75,那么宽度=150/75=2rem

5 .font-size可能需要额外的媒介查询，并且font-size不能使用rem，与上面的网易的设置相同

3. 淘宝弹性布局方案lib-flexible实践

页面设计切图（750设计稿设置）
解决retina屏问题的可行方案是：
在devicePixelRatio<=2时，图片统一使用750设计稿的切图;在devicePixelRatio>=2时，图片统一使用750*1.5=1125，也就是所谓@3x设计稿的切图
引入flexible.js库文件---在html页面里面，为了让适配的效果更快,尽可能早的引入这个js文件

注意：使用lib-flexible，通常不要设置meta viewport视口设置，交给flexible.js自己处理
1. 除font-size外，其它大小都根据750标注稿的尺寸，转换成rem单位的值，转换方法为：标注稿尺寸 / 标注稿基准字体大小；
2. 标注稿基准字体大小 = 标注稿宽度 / 10，如标注稿宽为750，标注稿基准字体大小为75；标注稿宽为640，标注稿基准字体大小为64
3. 如果需要设置font-size，可跟据html的data-dpr属性来处理，类似下面的写法

// 字体适配
@mixin font-dpr($font-size) {
  font-size: $font-size+px;
  [data-dpr="2"] & {
    font-size: $font-size * 2+px;
  }
  [data-dpr="3"] & {
    font-size: $font-size * 3+px;
  }
}

// 设置字体的大小
p{
    @include font-dpr(10);
}

例子：

//屏幕适配
@function px2rem($px, $base-font-size:75px) {
  @if (unitless($px)) {
    @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
    @return px2rem($px + 0px);
  } @else if (unit($px)==rem) {
    @return $px;
  }
  @return ($px / $base-font-size) * 1rem;
}

//字体适配
@mixin font-dpr($font-size) {
  font-size: $font-size+px;
  [data-dpr="2"] & {
    font-size: $font-size * 2+px;
  }
  [data-dpr="3"] & {
    font-size: $font-size * 3+px;
  }
}


div{
    @include font-dpr(10);
    width:px2rem(200);
}

参考链接：

https://segmentfault.com/a/1190000022509489

https://github.com/amfe/article/issues/17

https://blog.csdn.net/assassin_0302/article/details/88028457