响应式布局、弹性布局

响应式布局:

设置Viewport属性

width:控制viewport大小 

height：高度

initial-scale:初始缩放比例

maximum-scale:允许用户缩放的最大比例

minimum-scale:允许用户缩放最小比例

user-scalable:用户是否可以手动缩放

 

响应式布局网格试图

首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box。

确保边距和边框包含在元素的宽度和高度间。

 

 

 

媒体查询：

使用 @media 查询来制作响应式设计

如果        窗口小于 500px, 背景将变为浅蓝色：

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

不同设备显示不同图片

/* For width smaller than 400px: */
body {
    background-image: url('img_smallflower.jpg');
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    body {
        background-image: url('img_flowers.jpg');
    }
}

 

弹性布局

教程：

https://developers.weixin.qq.com/ebook?action=get_post_info&docid=00080e799303986b0086e605f5680a