响应式

1.考虑宽高比：保证在响应式的整个过程中宽高比不会改变
2.尺寸和比例的一致性：保证将图片裁剪成不同比例不同尺寸的大小
3.使用轮播图或者图库:轮播图控件和图库控件
4.尽量避免使用图片说明（Captions）:会非常直接地影响到网页的运作
5.图片和视频混用要小心:尽量不要让图片和视频同时存在于同一个控件或者区块中
6.削减不必要的元素:
7.只使用高素质的图片

精准响应式排版：

@media screen and (min-width:20rem){
    h3,.h3{
        font-size:calc(1.266rem + .511*(100vm - 20rem)/100);
        //calc(min-font-size + (max-font-size - min-font-size) *(100wm - min-screen-size)/ (max-screen-size - min-screen-size)  )
    }
}
//@media : 在不同的断点下，渲染出不同的效果
//vm:视窗宽度的百分比 1就相当于宽度的1%
//vh：视窗高度的百分比 
//vmin and vmax：(这次宽度和高度的最小值)当视口宽度为1280px 高度为720px  1vmin =7.2px;1vmax = 12.8px;
//视窗:浏览器屏幕，100vw将意味着整个浏览器宽度
//视窗单位的好处在于当视窗大小改变时，他们会自动的重新计算其大小。当重新加载页面，调整页面大小或改变页面方向时就会发生此现象

设置确切的最小字体号：

:root{
    font-size:calc(16px + 3vm);
}
//最好在媒体查询中使用，浏览器的支持性不是很好，对calc函数
@media (min-width:600px){
    :root{
        font-size:3vm;
    }
}

:root,html { 
    font-size: .875rem 
} 
@media screen and (min-width: 20rem) {
     :root,html { 
        font-size:calc(.875rem + .25 * (100vw - 20rem) / 100) 
    } 
} 
@media screen and (min-width: 120rem) { 
    :root,html { 
        font-size:1.125rem 
    } 
}

media Queries

让内容确定断点：
在响应式中我们经常看到的断点：320px 480px 768px 1028px等
iphone设备的竖屏尺寸：320px 横屏:480px ipad竖向尺寸:768px

JS :

if(window.matchMedia("(min-width:40em)").matches){}

rem 和 em

如果这个属性根据它的font-size来进行测量，则使用rem
其他的事物均使用em

@mixin for-size($range) {
  $phone-upper-boundary: 600px;
  $tablet-portrait-upper-boundary: 900px;
  $tablet-landscape-upper-boundary: 1200px;
  $desktop-upper-boundary: 1800px;

  @if $range == phone-only {
    @media (max-width: #{$phone-upper-boundary - 1}){
         @content; 
     }
  }@else if $range == tablet-portrait-up {
    @media (min-width: $phone-upper-boundary){
        @content; 
    }
  }@else if $range == tablet-portait-only {
    @media (min-width: $phone-upper-boundary) and (max-width: #{$tablet-portrait-upper-boundary - 1}) {
    @content; 
 }
 } @else if $range == tablet-landscape-up {
    @media (min-width: $tablet-landscape-upper-boundary) { @content; }
  } @else if $range == tablet-landscape-only {
    @media (min-width: $tablet-portrait-upper-boundary) and (max-width: $tablet-landscape-upper-boundary - 1px) { @content; }
  } @else if $range == desktop-up {
    @media (min-width: $tablet-landscape-upper-boundary) { @content; }
  } @else if $range == desktop-only {
    @media (min-width: $tablet-landscape-upper-boundary) and (max-width: $desktop-upper-boundary - 1px) { @content; }
  } @else if $range == big-desktop-up {
    @media (min-width: $desktop-upper-boundary) { @content; }
  }
}

// usage
.my-box {
  padding: 10px;

  @include for-size(desktop-up) {
    padding: 20px;
  }
}

移动端：
1、viewport指的是是用户网页的可视区域
2、viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。
3、默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站。

viewport：
iPhone：980
iPad:980
chrome :980
opera:980
IE:1024

devicePixelRatio = 物理像素 / 独立像素
css中的px就可以看做是设备的独立像素 == > 在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素

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

js动态改变meta viewport标签:

<meta id="testViewport" name="viewport" content="width = 380">
<script>
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');
</script>

viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;');

当前缩放值 = ideal viewport宽度 / visual viewport宽度
//visual viewport宽度指的是浏览器可视区域的宽度。
//ideal viewport宽度指的是完美适配移动设备的宽度