2021-04-06

Day 11
（一）响应式布局
1，什么是响应式布局：网站能够兼容多个终端
2，viewport
＜mate name＝"viewport" content
＝"width=device-width,initial_scale=1.0"
设备的宽度等于视口的宽度，初始化缩放比例是1：1
（二）网格布局
把页面分成12列
.col_1｛width:8.33% ｝
.col_2｛width:16.33% ｝
.col_3｛width:25% ｝
.col_4｛width:33.33%｝
.col_5｛width:42.66% ｝
.col_6｛width:50% ｝
.col_7｛width:58.33% ｝
.col_8｛width:66.66%｝
.col_9｛width:75% ｝
.col_10｛width:83.33% ｝
.col_11｛width:91.66% ｝
.col_12｛width:100%｝

属性选择器[ class* =“col-”] ｛
Float:left;
Padding:15px;
｝

（三）媒体查询 针对不同的媒体类型定义不同的样式
案例1
@media only screen and （ max_width:500px) ｛
boby ｛
background_color:bule｝
｝
最大宽度是500 即小于500怎么怎么样

案例2 在电脑中使用12列布局
@media only screen and （ min_width:500px) ｛
最小值是500，大于500时｛ ｝
12列布局
｝

案例3 范围 1000 ＜＞500