响应式开发

一、viewport

　　桌面上视口宽度等于浏览器宽度，但在手机上有所不同。

• 布局视口
  手机上为了容纳为桌面浏览器设计的网站，默认布局视口宽度远大于屏幕宽度，为了让用户看到网站全貌，它会缩小网站，例如ipone8的布局视口是850px;

• 视觉视口
  屏幕的可视区域，即物理像素尺寸

• 理想视口
  当网站是为手机准备的时候使用。通过meta来声明。iPhone8理想视口为375*667；

二、css像素和像素

　　css像素是一个相对单位，css像素的定义：参考像素即为从一臂之遥看解析度为96DPI的设备输出（即1英寸96点）时，1点（即1/96英寸）的视角。

由于中css像素的定义很模糊，所以主流浏览器没有按照这个定义来实现，而是将一像素视为1英寸的1/96。

　　像素是指显示设备上可寻址的最小单元。

三、使用meta设置viewport

　　iPhone8的布局视口是850px,按照1in=96px来转换，那么iPhone8的布局视口应该接近10in，但是iPhone8的视觉视口并没这么大，所以会对这个布局视口进行缩放，使得可以全部显示出来，但是同时造成了字体和图片偏小，为了解决这个问题，还可以减小布局视口，使iPhone8的布局视口和理想视口相等，及等于375*667；然后根据1in=96px来转化，则接近屏幕的视觉视口。为了是浏览器知道如何转化(布局视口=理想视口)，我们需要使用meta标签设置视口;　

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

 四、响应式设计中可以使用的工具

　　为了实现响应式设计，我们可以使用的工具有viewport元便签和媒体查询。

　　viewport元标签可以使网页适应我们的设备宽度，媒体查询可以是我们在不同的屏幕尺寸下显示不同的样式。

　　a.viewport元标签　

　//视口的宽度等于理想视口的宽度，初始缩放比例1.0.最大最小缩放比例1.0,不允许用户缩放。
　<meta name="viewport" content="width=device-width,initial-scale=1.0，minimum-scale=1.0,
maximum-scale=1.0,user-scalable=no"/>

　　b.媒体查询

　　使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

　　

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

　　mediatype可以省略，查询的条件可以是max-widtht/height、min-width/height、orientation(定义输出设备中的页面可见区域高度是否大于或等于宽度)　　

//竖屏 宽小于高
@media only screen and (max- 500px) and （orientation:portrait）{
    .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    }
}
//横屏 宽大于高
@media only screen and (max- 500px) and(orientation:landscape){
    .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    }
}

　　参考：https://www.jianshu.com/p/99b2f6f9a606