viewport

Viewport:是用户网页的可视区域。 手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。 设置 Viewport 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height：和 width 相对应，指定高度。 initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 maximum-scale：允许用户缩放到的最大比例。 minimum-scale：允许用户缩放到的最小比例。 user-scalable：用户是否可以手动缩放。 响应式网格视图 创建响应式网格视图 接下来我们来创建一个响应式网格视图。 首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box 。 确保边距和边框包含在元素的宽度和高度间。 添加如下代码： * { box-sizing: border-box; 来源： https://www

来源于：https://blog.csdn.net/qq_21794603/article/details/68585249 Bootstrap响应式布局是利用其栅格系统，对于不同的屏幕采用不同的类数据。在开发中可以只写一套代码在手机，平板，PC端都能使用，二不用考虑使用媒体查询（针对不同的设备分别写不同的代码）。Bootstrap的官方解释：Bootstrap提供了一套响应式、移动设备优先的流逝栅格系统，随着屏幕或者视口（viewport）尺寸的增加，系统会自动分为最多12列。 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局； 栅格系统的工作原理： 1、行（row）必须包含在.container（固定宽度）或者.container-fluid（100%宽度）中，一遍为其赋予合适的排列（aligment）和内部（padding）； 2、通过行（row）在水平方向创建一组列（column）； 3、自己内容应当放置与类（column）内，并且只有列可以作为行（row）的直接子元素。 4、类似.row和col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化布局。 5、通过为列设置padding属性，从而创建列与列直接的间隔（gutter）。通过为.row元素设置负值margin从而抵消为

前端页面自适应 <meta name= "viewport" content= "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 页面的头部加上这句话. <meta name= "viewport" content= "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 页面的头部加上这句话. 来源： https://www.cnblogs.com/xdlzs/p/12165773.html

实际开发中的像素：css像素 设备像素比dpr=设备像素/css像素 标清屏dpr=1 高清屏dpr=2 缩放改变的是css像素大小 PPI（每英寸的物理像素点）=根号（屏幕横向分辨率²+屏幕纵向分辨率²）/屏幕对角线长度（单位英寸） 视口viewport <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1"> <script> console.log(window.innerWidth);//窗口文档显示区宽度 console.log(document.documentElement.clientWidth);//浏览器窗口文档显示区域的宽度，不包括滚动条 console.log(document.documentElement.getBoundingClientRect().width);//这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离 // getBoundingClientRect().top // getBoundingClientRect().right // getBoundingClientRect()