【Day17】移动端页面布局

学习内容

• 常见单位

常见单位

px: 像素 固定单位
%: 百分比 基于父级宽高进行改变

rem: 基于根目录 (html) 文字大小进行更改
  1rem=font-size

em: 基于本身文字大小或者最近的具有文字大小属性的父级元素来进行更改
  1em=font-size

pt: 磅值 实际单位 国外网站，现在基本不用

vw: viewport-width 100vw=1个完整视口宽度
vh: viewport-height 10ovh=1个完整视口高度

1.如何实现正方形
宽高使用同一种单位
2.width: 100% 和 width: 100vw的区别
参照物不一样
% 是基于父级元素的宽
vw 是可视窗口

iphone678 375 1vw=?px 100vw=375px 1vw=3.75px
iphone5 320 1vw=3.2px
iphone678plus 414 1vw=4.14vw