今天开始移动端的学习,因为疫情原因在家上网课.
一、先来看一下今天了解的一个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。