一、viewport

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

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

    SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

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

  • 理想视口
    当网站是为手机准备的时候使用。通过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标签设置视口;　

1 <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"/>

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

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄