发表于： 2019-03-29 00:00:48
1 837
今天完成的事：
根据师兄的指点把宽度单位换成了由vw换成了%，方块高度用padding-top： 30%；填充上内边距来代替，
顺利完成了自适应。
百度了vw px vh rem % 的区别：
1、px
px就是pixel的缩写，意为像素。px就是设备或者图片最小的一个点，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。
是我们网页设计常用的单位，也是基本单位。通过px可以设置固定的布局或者元素大小，缺点是没有弹性。
一般而言，pixel（像素）是图像的基本采样单位。所以它不是一个确定的物理量，也不是一个具体的点或者小方块（尽管可以用点和小方块来呈现），而是一个抽象概念,单位面积内的像素，可大可小,是相对于显示器屏幕分辨率而言的.用PX设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破.
2、em
参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
特点是1. em的值并不是固定的； 2. em会继承父级元素的字体大小。
rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值，可以设计HTML为大小为10px，到时设置1.2rem就是12px.以此类
优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好。
注意：谷歌浏览器强制最小字体为12号，即使设置成10px最终都会显示成12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准。
4、%
一般来说就是相对于父元素的，
1、对于普通定位元素就是我们理解的父元素 2、对于position: absolute;的元素是相对于已定位的父元素 3、对于position: fixed;的元素是相对于ViewPort（可视窗口）
css3新单位，view width的简写，是指可视窗口的宽度。假如宽度是1200px的话。那10vw就是120px
举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
尽管%和vw在很多地方都很相似 在使用的过程中还是要注意 在出现竖向滚动条的时候vw=%+滚动条的宽度
6、vh
css3新单位，view height的简写，是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px
举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。
7、vmin
vw和vh中较小的那个。
vmax
vw和vh中较大的那个。
比如，浏览器的宽度设置为1200px，高度设置为800px，1vmax = 1200/100px = 12px，1vmin = 800/100px = 8px。如果宽度设置为600px,高度设置为1000px, 1vmin就等于6px, 1vmax则等于10px。
收获：
如果希望自适应，那么就不要指定具体的高度，一般只给宽度给100%（最上边的容器）
明天计划：
配置nginx
做任务一深度思考
返回列表
评论