视口 | viewport
meta标签: 布局视口的宽度应该与理想视口的宽度一致, 简单理解就是设备有多宽. 我们布局的视口就多宽
布局视口 | layout viewport
视觉视口 | visual viewport
理想视口 | ideal viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
物理像素 | 物理像素比
物理像素: 即 分比率, iPhone8的物理像素是 750 | 在iPhone8里面1px 开发像素 = 2个物理像素
background-size背景缩放 : 长度 | 百分比 | cover | contain
cover把背景图像扩展至足够大, 以使背景图像完全覆盖背景区域
contain把背景图像扩展至最大尺寸, 以使其宽度和高度完全适应内容区域
特殊样式
自定义输入框input样式，去除外观高光
input {-webkit-appearance: none;}C3盒子模型
box-sizing: border-box;即width || height + padding + border + margin禁止长按页面弹出菜单
-webkit-touch-callout: none;扫描二维码关注公众号，回复： 6688098 查看本文章
felx布局
父元素上:
display:flex
flex-direction: row || cloumn: 主轴方向: X轴 || Y轴
justify-content: flex-start || flex-end || center || space-around || space-between: 主轴上的子元素排列方式:
flex-wrap: nowrap || wrap换行: 默认不换行,一行显示
align-content:flex-start || flex-end || center || space-around || space-between: 侧轴上的子元素排列方式(多行)
align-items: flex-start || flex-end || center || streth: 侧轴上的子元素排列方式(单行)子元素上:
flex: 1 0 auto: 三值语法
参数一: 拉伸(无单位)
参数二: 缩放(无单位i)
参数三: px || % || auto
媒体查询
link元素中的CSS媒体查询
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
样式表中的CSS媒体查询
媒体查询 Media Query :
@media 可以针对不同的屏幕尺寸设置不同的样式
用 @media 开头 注意@符号
mediatype all || print || screen 媒体类型
关键字 and not only
media feature 媒体特性 必须有小括号包含
为了防止混乱，媒体查询我们最喜欢的还是从小到大来写，这样代码更简洁(具有层叠性)
<style> /* 800px 以内的屏幕 body背景颜色为pink */ @media screen and (max-width:800px) { body { background-color: pink; } } </style>
rem : 可以将rem理解为scale 缩放倍数来理解，是以html的font-size的倍数来处理的 等比例适配当前设备
em: 对于父元素 的字体大小来说的
rem : 相对于 html元素 字体大小来说的
less
Less （Leaner Style Sheets 的缩写） 是一门 CSS 扩展语言，也成为CSS预处理器
less变量
必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感
// 只需改动声明里的值就可以了 @color: pink; //直接使用 body{ color:@color; } a:hover{ color:@color; }less编译
通过解析器, 编译生成对应的 CSS 文件
less嵌套
/* css */ header.logo{ width: 300px; } /* less */ header { .logo { width: 300px; } } /* 1. 遇见（交集|伪类|伪元素选择器） 利用&进行连接 */ /* 2. 简单来说就是直接套进去写，方便简洁 */less运算
乘号（*）和除号（/）的写法
运算符中间左右有个空格隔开
1px + 5对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
如果两个值之间只有一个值有单位，则运算结果就取该单位
响应式开发
响应式开发原理: 使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备
设备划分
小于768的为超小屏幕（手机）
768~992之间的为小屏设备（平板）
992~1200的中等屏幕（桌面显示器）
大于1200的宽屏设备（大桌面显示器）
响应式需要一个父级做为布局容器 来配合子级元素来实现变化效果
原理: 通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实 现不同屏幕下，看到不同的页面布局和样式变化
部分参考: [ https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries ]