一.分栏
column-width 栏目宽度
该属性主要用来定义每栏的宽度。
column-count 栏目列数
指定了需要分割的列数;
column-gap 栏目距离
该属性主要定义两栏之间的间距距离。
column-rule 栏目间隔线
该属性定义每栏之间边框的宽度、样式和颜色。
缩写:
二.媒体查询
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
三 .meta元数据标签
Meta标签是用来描述HTML文档的信息。HTML语言中HEAD区的一个辅助性标签,它位于HTML文档头部的<head>标记 和<title>标记之间,它提供用户不可见的信息。
width=device-width:宽度等于设备宽度
initial-scale=1.0:默认缩放1.0
maxinmum-scale=1.0:最大缩放1.0
user-scalable=0:用户不允许手动缩放(不加上面三条的话,手机端屏幕会一点就变大哦)
name="viewport":声明是视图层
px、em与rem的区别:
px是固定的像素,一旦设置了就无法因为适应页面大小而改变。
em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。
对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素。
rem中的r意思是root(根源)
em
- 子元素字体大小的em是相对于父元素字体大小
- 元素的width/height/padding/margin用em的话是相对于该元素的font-size
rem
rem是全部的长度都相对于根元素,根元素是谁?<html>元素。通常做法是给html元素设置一个字体大小,然后其他元素的长度单位就为rem。
如果加上box-size不会影响盒子大小