网页设计

1、分栏

column-count: 4; 栏数 列数

column-width: 200px; 每栏的宽度，单位像素px

column-rule: 5px solid red; 指定列之间的规则：宽度、样式、颜色

column-gap: 5px; 栏间距 设置栏间距

 2、媒体查询

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box{width: 100px;height: 100px;transition: 0.8s;background-color: red;}@media screen and (max-width:700px){.box{width:150px;height: 150px;background-color:green;}@media screen and (max-width:500px){.box{width:50px;height: 50px;background-color: aqua;}@media screen and (max-width:300px){.box{width:90px;height: 90px;background-color: black;}}</style></head><body><div class="box"></div></body>
</html>

3、meta元数据标签

基本格式： 

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

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）
 height：和 width 相对应，指定高度
 initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例
 maximum-scale：允许用户缩放到的最大比例
 minimum-scale：允许用户缩放到的最小比例
 user-scalable：用户是否可以手动缩放，值为"yes"或"no"

4、em和rem的区别

em 一个文字的倍数，继承父级元素的字体大小。

rem 一个文字的倍数，继承根目录的字体大小