初学移动端

今天开始移动端的学习，因为疫情原因在家上网课.

一、先来看一下今天了解的一个css3样式

column-count : 3; 列数

column-width : 100px; 列宽

column-gap : 2em; 列间距

column-rule : 2px #f00 outset 列样式

可以用这些属性来定义你的段落分列显示。

二·、媒体查询

@media screen and (max-width: 600px){

.list{

width: 100%;

height: 100px;

     }

}

这个属性主要用来设置在不同大小的屏幕下所显示的内容

如果指定的是最大宽度，就先写大范围，再写小范围，这样避免了被覆盖；如果是小范围，就从小往大进行定义。

三、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"。

四、em与rem的区别：

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

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

今天学了移动端界面，做了一个小案例，总结：移动端需要适应不同大小的屏幕，所以需要对屏幕缩放进行测试，而且移动端必须要定义meta标签，并且需要引入媒体查询进行适应屏幕，而且表示长度的单位要用rem。