CSS3自适应和响应式布局

CSS3响应式:

一.网页宽度自动调整

网页代码头部加入一行代码

meta name=”viewport” content=”width=device-width, initial-scale=1″ /

这是一行viewport元标签，viewport是网页默认的宽和高，上面代码的意思为：网页的宽度默认等于显示器的屏幕宽度，原始缩放的比例为1.0，即指网页初始大小占屏幕面积100%

目前主流的浏览器都支持，包括IE9（IE9以下，请使用css3 Media Queries）

二.用CSS3的@media查询

查询有三种方式：

1. 直接在CSS文件中使用

 
            @media 类型 and (条件1) and (条件2)
            {
             css样式
            }
            实例：
            @media screen and (max-width:600px ) {
             body{
             background-color: back;
             }
            }

2. 使用@import来导入

            @import url("css/moxie.css") all and (max-width:600px);

3. 使用link连接，media属性用于设置查询

             rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css"

CSS3自适应:

在实际应用中，先要在代码头部加入下面这段代码

 
        meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"

解释：　

width = device-width：宽度等于当前设备的宽度

initial-scale：初始的缩放比例（默认设置为1.0）

minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）

maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）

user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面,也可以设置成yes,让用户能缩放页面）

media的类型很多，具体可以参考菜鸟教程和W3School

菜鸟教程：https://www.runoob.com/cssref/css3-pr-mediaquery.html

W3School：https://www.w3school.com.cn/tags/att_source_media.asp

                @media screen and (min-width: 320px) and (max-width: 1600px){

                    .sitl {
                    position: fixed;
                    height: 100%;
                    width: 100%;
                    z-index: 0;
                    -moz-background-size:100% 100%;
                  }
      }
      仅为实例

解释

当屏幕大小大于320px,小于1600px时执行{}内代码

注意点:

1.不使用绝对宽度

因为网页会根据屏幕的宽度来调整布局，所以不能用绝对宽度布局，只能指定百分百或者auto

2.使用相对大小字体rem

css中字体常用单位px、em、rem和%的区别及用法总结见：https://www.cnblogs.com/vickylinj/p/10931735.html

3.流动布局

在流动布局中，各个区块的位置都是浮动的，不是固定不变的

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现

另外要小心使用绝对定位（position: absolute）的使用

参考:
https://www.cnblogs.com/vickylinj/p/10712080.html
https://www.cnblogs.com/softlover/archive/2012/11/28/2781388.html
https://www.cnblogs.com/vickylinj/p/10932210.html
https://www.cnblogs.com/zjoe-life/p/10557967.html