手机移动端的一些布局,视口知识的分享

手机视口

       使用js来检测屏幕视口的宽度

               document.documentElement.clientWidth；

               使用手机执行这段代码，发现不管是什么手机，大屏小屏，宽度都是980px

               电脑：分辨率 = 视口宽度

               但是，手机的分辨率远远大于980，比如iPhone6p 分辨率是：1240 * 2208

               按道理说手机视口应该是1242才对

               980是viewport的宽度，viewport就是视口

               980是人为定的，这个是乔帮主（乔布斯）定的980这个数字

               总结：980是人为规定的宽度，叫做视口宽度，所有手机的默认视口宽度都是980px，如果使用手机浏览没有优化的电脑网页，将会非常方便

               但是：问题来了，如果我发布的页面专门用于手机访问，那么980太宽了，里边装的东西太多，我们希望使用手机屏幕真实宽度作为视口宽度

               现在我们可以通过约束视口，打到我们的要求

               <meta name='viewport' contant='width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scaleable=no'>

               width = device-width：视口宽度约束到手机设备宽度

               initial-scale：默认初始缩放比例

               maximum-scale：最大可缩放比例

               minimum-scale：最小可缩放比例

               user-scaleable：用户是否可缩放

               这个meta标签，就是做的视口约束，约束之后的视口宽度，和设备宽度相同，其实这个数字也是人为设置的，每个设备出厂都会制定一个约束视口的宽度

               约束之后的视口不是自己的分辨率

               当然作为前段工程开发工程师，我们不关心分辨率，我们只关心视口宽度

               视口越小，字越大，约束之后的视口一般在320 - 480之间，这个宽度字足够小，看起来比较清晰，比较合适

流式布局

          1，手机网页没有版心，两边没有留白，站满手机宽度

               原因：

                    1）手机视口比较小，如果再有留白非常难看

                    2）手机APP基本都是沾满屏幕的，一般情况没有左右空白，但是没有版心，对我们的布局忽悠很大的影响，布局没有办法给固定值

               手机没有版心，视口各不相同，所以做手机开发尽可能使用百分比布局，每一个元素都会根据屏幕的宽度变化而变化

          2，百分比布局

               如果使用百分比width，那么指的是父元素width的百分之几，没有父元素就参照body

               如果使用百分比写height，那么指的是父元素的height的百分之几

               如果使用百分比写padding，那么指的是父元素的width的百分之几，无论是水平的还是垂直的，都是以父元素的width为准

               如果使用百分比写margin，那么指的是父元素的width为准，无论水平还是垂直，都是父元素的width为准

               但是不能使用百分比写border

百分比布局

          1，相对于谁

          思维线：

               手机屏幕小-->不要留白--> 撑满页面--> 视口宽度不同-->不能使用px固定-->使用百分比布局

               百分比布局也就做流式布局，弹性盒子布局

          2，css3弹性盒子属性   display：-webkit-box；

               如果让三个盒子按照1:2:3来设置宽度，name每个盒子应该给多少百分比？

               16.666%   33.3333%   50%

               css3,推出一个新属性display属性有一个新的值：box，兼容还有一定问题，尽量加上-webkit-，加上这个属性之后，这个元素的所有儿子就是弹性布局了，儿子们不需要设置float：left，能够默认并排排列，通过设置-webkit-box-flex：num；来设置所占比例

          3，css3新的盒子模型box-sizing：border-box；

               box-sizing属性允许你以特定的方式定义匹配某个区域的特定元素

               box-sizing就是盒子的尺寸，这是属性定义了你设置的width，height值的是什么宽度，高度

               一般来说width，height指的是内容宽度和高度，但是加上  box-sizing：border-box；这时width和height值的是border外侧构成的盒子的宽度和高度

              在之前css3退=推出了一个可以用于计算的属性：calc，可以用于数字或者百分比的计算

               width：calc（50% - 10px）；（相当于裁剪）

               calc 只能做加减运算，并且必须带着单位，类似一个函数

               现在很少人使用，一般使用box-sizing：border-box；一招鲜，吃遍天

          4，固比固     

               1）绝对定位方法进行固比固布局

   

               2）display：box  属性

   

           5，min-width和max-width

               按百分比布局的时候，进行一个限制