发表于： 2019-02-13 23:17:28
1 782
今天完成的事：
重新学习自适应（昨天误解了自适应，以为一行代码就可以实现）
1. 初步了解了什么叫响应式：在不同尺寸的窗口大小下，显示不同的排布【图例】
2.学习了 em 和 rem，各自的用处，以及rem的优势
em : ① em的值并不是固定的; ② em始终会继承父级元素的字体大小。【图例】
rem：CSS3新增的一个相对单位（root em，根em），区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。【图例】
-------------------------------------------------------------------------------------------------
em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，
在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素
确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。
3.px，em，rem，vw的简单介绍
px：px其实就是像素的意思，全称pixel，也就是图像的基本采样单位。对于不同的设备，它的图像基本单位是不同的，比如显示器和打印机。
而我们通常所说的显示器分辨率是指桌面设定的分辨率，不是显示器的物理分辨率，但是现在我们的桌面分辨率和物理分辨率几乎是一致的，
因为这样显示效果最佳。所以总的来说px就是对应我们显示器的分辨率。这样就会有个问题就是如果使用px的话我们就要根据不同电脑的分辨率来做自适应，有点麻烦。
em：em是相对长度单位。相对于当前对象内本文的字体尺寸（如果没有设置本文尺寸，那就是相对于浏览器默认的字体尺寸，也就是16px，这样计算的话。如果没有设置字体尺寸就是1em = 16px。如果使用em的话，有个好的建议，就是将body的font-size设置成62.5%，也就是16px * 62.5% = 10px。这样的话1em = 10px，方便计算。
rem：rem和em一样也是相对长度单位，但是不一样的是rem始终都是相对html根元素。这样有个很大的有点就是使用rem后不会受到对象内文本字体尺寸的影响，而且只需要改变根元素就能改变所有的字体大小。兼容性也是不错的，IE8以上版本和其他浏览器都已经支持，是个做响应式页面的好选择
vw：vw和vh是视口（viewport units）单位，何谓视口，就是根据你浏览器窗口的大小的单位，不受显示器分辨率的影响，这就代表了，我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。
vw是可视窗口的宽度单位，和百分比有点一样，1vw =可视窗口的宽度的百分之一。比如窗口宽度大小是1800px，那么1vw = 18px。和百分比不一样的是，vw始终相对于可视窗口的宽度，而百分比和其父元素的宽度有关。
--------------------------------------------------------------------------------------------------
遇到的问题：
1.在了解了em之后，准备用em值来确定九个格子的位子，发现无法计算出合适的距离，不知道浮动和em怎么结合，
之前不考虑自适应的时候，用特定值写格子，可以计算出像素值来定位，现在换成百分比很懵逼。
2.应该问题还出在绝对定位left top上，现在不知从何入手，准备明天继续查资料，师兄看到了能不能指点一下迷津
--------------------------------------------------------------------------------------------------
明天的计划：
今天的任务耽搁了，一直卡在原地，明天继续梳理知识，完成自适应，基础不牢固容易崩塌，心态放好，一步步来！！
返回列表
评论