vw单位
1.移动端不能使用px来进行布局,固定的像素长度在不同手机中的表现是不一样的。
2.vw表示的是视口的宽度。(100vw = 一个视口宽度、1vw = 1%视口宽度)
3.和百分比不同,vw单位永远都是相对于视口宽度进行计算,百分比相对于父元素。
vw适配
1.网页中字体大小最小是12,除0外不能设置比12像素还小的字体,如果我们设置了一个小于12px的字体网页自动设置为12px。
响应式布局
1.响应式布局是网页可以根据不同的设备或窗口大小呈现出不同的效果,使用响应式布局,可以使一个网页使用于所有设备。
2.响应布局的关键就是媒体查询,通过媒体查询,可以为不同的设备,或设备不同状态来分别设置样式。
3.媒体查询:
-语法:@media 查询规则 {}
-媒体类型:
-all 所有设备
-print 打印设备
-screen 带屏幕的设备
-speech 屏幕阅读器
4.可以使用逻辑运算符 “,”“and”"not"“only”。
5.可以在媒体类型前面添加一个only,表示只有, only的使用主要是为了兼容一些老版本浏览器 (老版本无法识别会跳过)。
6.媒体的特性:
-width 视口宽度
-height 视口高度
-min-width 视口最小宽度(视口大于指定宽度时生效)
-max-width 视口最大宽度 (视口小于指定宽度时生效)
7.样式切换的分界点,我们称之为断点,也就是网页的样式会在这个点时发生变化。
-一般常用的断点:
-小于768 超小屏幕 max-width=768px
-大于768 小屏幕 min-width=768px
-大于992 中型屏幕 min-width=992px
-小于1200 大屏幕 min-width=1200px
学识浅薄,如有错误,恳请斧正,在下不胜感激。