[前端学习笔记] CSS移动端流式布局

一、移动端基础知识

1. 浏览器现状
   1）PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、IE浏览器、QQ浏览器、百度浏览器…
   2）移动端常见浏览器：UC浏览器、QQ浏览器、欧朋浏览器、百度手机浏览器、360安全浏览器、谷歌浏览器…
   国内的手机浏览器都是根据Webkit修改的内核，所以只需要处理Webkit内核浏览器即可。
2. 手机屏幕现状
   移动端碎片化比较严重，设备屏幕尺寸种类、分辨率种类繁多。开发时无需关注分辨率，使用的尺寸单位是px，常见移动端屏幕尺寸如下（物理像素比的含义在下方第5点进行解释）：
   
3. 移动端调试方式
   1）Chrome DevTools 谷歌浏览器模拟手机调试。
   2）搭建本地Web服务器，手机和服务器在一个局域网内，通过手机访问服务器。
   3）使用外网服务器，直接IP或域名访问。
4. 视口（viewport）
   浏览器显示页面内容的屏幕区域。
   1）布局视口layout viewport：PC上的网页可在手机上呈现，但元素小需要缩放。
   2）视觉视口visual viewport：用户能看到的网站的区域，缩放操作视觉视口，不会影响布局视口。（视觉视口根据用户操作改变内容，整体的布局并不会改变）
   3）理想视口 ideal viewport：对于设备来讲最理想的视口尺寸，需要手动添加meta视口标签。

<meta name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<!--
    meta标签：布局视口的宽度应该与理想视口的宽度一致，即设备多宽，布局视口应多宽。
        width           设置宽度，一般device-width设备宽度
        initial-scale   初始缩放比，大于0的数字
        maximum-scale   最大缩放比，大于0的数字
        minimum-scale   最小缩放比，大于0的数字
        user-scalable   用户能否缩放，能1否0/no
-->

5. 物理像素比
   1）物理像素点：屏幕显示的最小颗粒，是物理真实存在的，即分辨率。屏幕一旦做好就不再改变。
   2）物理像素比：PC端1px=1物理像素，移动端不尽相同，存在比例的关系。
   例如：iPhone8的物理像素是750，1px开发像素=2个物理像素，则最大为375px
   3）物理像素比产生的原因是Retina（视网膜屏幕）显示技术：
   可以把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，提高屏幕显示的细腻程度。
6. 二倍图
   我们需要一个5050px的图，如果直接放到我们的iphone8里面，因为iphone8的物理像素比为2【物理像素=250=100px】，图片就会放大2倍，变得模糊。为了避免图片放大后模糊，我们可以预先制作一张100 *100px的图片，然后在网页中手动设置这个图片的样式，将图片的宽和高都设为50px。这样，这张图片就会以它原本的像素100 *100px来显示，保证了图片原有清晰度。

<img src="images/apple100.jpg" alt="">
<style>
        /* 我们采取的是放一个100*100px图，然后手动缩小为50*50px
        图片就会以它原本的像素100*100px来显示，保证了图片原有清晰度 */
        img:nth-child(2) {
            width: 50px;
            height: 50px;
        }
</style>

精灵图二倍图的使用：

/* 
   1. 把精灵图等比例缩放到原来的一半，background-size大小也改为精灵图一半
   2. 再根据大小测量坐标，写偏移量
*/
    background:url(../images/jd-sprites.png) no-repeat -81px 0;
    background-size: 200px;

7. 背景缩放
   通过background-size可以规定背景图片的尺寸，两参数分别为图片的宽度和高度。

<style>
        div {
            width: 500px;
            height: 500px;
            border: 2px solid red;
            background: url(images/dog.jpg) no-repeat;
            background-size: 500px 200px;
            /* 1.只写一个参数宽度会等比例缩放 */
            background-size: 500px;
            /* 2.里面的单位可以跟% 占比是相对于父盒子来说的 */
            background-size: 50%;
       /* 3.cover等比例拉伸，要完全覆盖盒子，可能有部分背景图片超出盒子显示不全 */
            background-size: cover;
      /* 4.contain等比例拉伸，且当宽度或高度铺满盒子就不再拉伸，可能有部分空白区域 */
            background-size: contain;
        }
</style>

背景图片也是用二倍图，利用background-size属性实现：

div {
      width: 50px;
      height: 50px;
      border: 1px solid red;
      background: url(images/apple100.jpg) no-repeat;
      background-size: 50px 50px;
}

8. 特殊样式

<style>
        img,
        a {
            /* 取消 长按弹出菜单 */
            -webkit-touch-callout: none;
        }

        a {
            /* 取消 点击高亮颜色 */
            -webkit-tap-highlight-color: transparent;
        }

        input {
            /* 取消 外观效果 */
            -webkit-appearance: none;
        }
</style>

二、移动端常见布局

1. 单独制作移动端页面【主流】

• 流式布局（百分比布局）
• flex弹性布局（强烈推荐）
• less+rem+媒体查询布局
• 混合布局

2. 响应式页面兼容移动端【其次】

• 媒体查询
• BootStrap框架

三、流式布局（百分比布局）

如果都使用px为单位，始终按照设置的值布局，由于浏览器大小不一，这样的布局很容易在不同设备中出现滚动条、内容过于大/小等问题。
流式布局，即百分比布局，也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制。它可以保证当前屏幕分辨率发生改变的时候，页面中的元素大小也可以跟着改变。

<section>
        <div></div>
        <div></div>
</section>

<style>
        * {
            margin: 0;
            padding: 0;
        }
        section {
            width: 100%;
        /* 设定最大最小宽度：最大宽度即页面最大时的版心，最小宽度一般为320px */
            max-width: 980px;
            min-width: 320px;
            margin: 0 auto;
        }
        section div {
            float: left;
        /* 流式布局主要的宽度为百分比：每个盒子的宽度占section宽度的50% */
            width: 50%;
            height: 400px;
        }
        section div:nth-child(1) {
            background-color: pink;
        }
        section div:nth-child(2) {
            background-color: purple;
        }
</style>

流式布局的常见应用场景见下图【为各个元素的宽度分配百分比】：

四、流式布局缺点

因为流式布局的宽度使用百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样，显示非常不协调。