一、css--分栏 columns
1.属性值
- column-width 栏宽 列宽
- column-count 栏数 列数
- columns:栏宽 栏数
- column-gap 列间距 栏间距
- column-rule 宽度、样式、颜色
2.上机实例
p{
column-width: 200px;
column-count: 4;
columns: 200px 4;
column-gap: 20px;
column-rule: 1px solid #ff00ff;
}二、响应式布局和自适应布局
1、响应式布局
响应式布局就是在不同屏幕不同分辨上实现不同的展示方式。响应式布局能使网站在手机和平板电脑上有更好的浏览体验，也就就是说一个网站能后兼容多个终端，而不是为了每一个终端做一个特定的版本。
优点：
- 对于不同设备只需要开发一套网页即可，公司开发成本较低
- 一套网页可以适配多个终端
缺点：
- 一个页面需要兼容多个终端，考虑的情况多种，开发效率较慢
- 代码会更多，网页的加载速度较慢
2、自适应布局
自适应布局就是能忘了使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，需要开发多套界面来适应不的终端。
3.区别
- 自适应布局通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。
- 自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了。
- 自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素。而响应式布局是一套页面全部适应。
- 自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念，它可以自动识别屏幕宽度并做出相应调整的网页设计。
三、媒体查询
1、什么是媒体查询
媒体查询可以让我们根据设备显示的特征（视口宽度、屏幕比列、设备方向）来设定CSS样式，媒体查询有媒体类型和一个或多个检测媒体特征的条件表达式组成。
2、meta标签
- width=device-width 屏幕和设备同宽
- initial-scale=1.0 初始的缩放比例
- maximum-scale=1.0 允许用户缩放的最大比例（默认为1.0）
- minimum-scale=1.0 允许用户缩放的最小比例（默认为1.0）
- user-scalable=no 用户是否可以手动缩放（默认为no）
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">四、px em rem
1、px
px 实际上就是像素，用PX设置字体大小时，比较稳定和精确。
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
2、em
em 就是根据基准来缩放字体的大小。
em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。
- em的值并不是固定的；
- em会继承父级元素的字体大小。
3、rem
rem 相对于根元素
<html>，这样就意味着，我们只需要在根元素确定一个参考值。rem是全部的长度都
相对于根元素(<html>元素)。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
607
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
