移动Web -11 移动适配
一. Vw
vw：viewport width
1vw = 1/100视口宽度
vh：viewport height
1vh = 1/100视口高度
vw单位尺寸
- 确定设计稿对应的vw尺寸 （1/100视口宽度）
查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度）
-
vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )
二.文本强制不换行
white-space: nowrap;
三.vmin和vmax
100vmin指的是屏幕宽和高中较小的那个值 375 667 竖屏 取375 横屏375 100vmax指的是屏幕宽和高中较大的那个值 375667 竖屏 取667 横屏667
vmin和vmax一般推荐使用vmin可以解决移动端横屏文字显示不一致的问题,替换vw即可
四.媒体查询
@media 关键词 媒体类型(screen:屏幕) 关键词 媒体特性(成立的条件){}
@media 媒体特性(成立的条件){}
屏幕宽度小于768, 手机
屏幕宽度在768-992之间, 平板
屏幕宽度在992-1200之间, 桌面显示器(笔记本)
屏幕宽度大于1200, 大桌面显示器(台式机)
