发表于： 2019-10-05 11:12:01
1 1057
今天完成的事情：
完成拖了比较久的任务三
主要练习一下之前看过的选择器
学习使用rem单位
px是相对于屏幕分辨率而言的，它是一个相对的长度单位，所以在pc端上，一个物理像素显示一个像素点，1px就是一个像素点。
而到了移动端，因为分辨率提高而尺寸没有变大，就出现了几个物理像素显示一个像素点的情况，1px就不等于一个像素点，这种情况再使用px就会让图片变得非常小。
em设置相当于父级元素的font-size的px为1em
rem是设置相当于根元素的font-size的px为1rem
1.如何利用PS切图以及从UI图中获取所需信息？
可以使用插件切图或者直接用区域选择框对选区另存为保存PNG格式，针对不同屏幕分辨率需要保存不同的像素比例
2.px、em、rem、%、vw、wh、vm等单位有什么区别？
px是一个相对的长度单位，1px不等于一个物理像素点
em是相当于父元素font-size的px值为1em
rem是相当于根元素font-size的px值为1rem
%是相当于整个页面的百分比长度单位
vw和vh是相当于视窗的百分比宽高单位
vm好像没这个东西，只有vmax和vmin，指的是宽高比较，vmax使用大的长度，vmin则是使用小的长度
3.如何进行自适应网页设计？
加入<meta name="viewport" content="width=device-width, initial-scale=1.0">，其中width=device-width的意思是让页面大小和移动设备视窗相同，但它真正的作用是将单位缩放为100%的css像素，initial-scale=1.0代表可缩放 比例，1.0表示不允许缩放
4.css有哪些选择器，优先级如何计算？
选择器有ID选择器，类选择器，标签选择器，以及一些组合选择器，优先级顺序是 内联>ID选择器>类选择器>标签选择器
组合选择器的优先级比较复杂，引用网上的资料
优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：
- 1.如果存在内联样式，那么
A = 1, 否则A = 0; - 2.
B的值等于ID选择器出现的次数; - 3.
C的值等于类选择器和属性选择器和伪类出现的总次数; - 4.
D的值等于标签选择器和伪元素出现的总次数 。
相当于
#nav-global > ul > li > a.nav-link
套用上面的算法，依次求出 A B C D 的值：
1.因为没有内联样式 ，所以 A = 0;
- 2.ID选择器总共出现了1次，
B = 1; - 3.类选择器出现了1次， 属性选择器出现了0次，伪类选择器出现0次，所以
C = (1 + 0 + 0) = 1； - 4.标签选择器出现了3次， 伪元素出现了0次，所以
D = (3 + 0) = 3;
上面算出的A 、 B、C、D 可以简记作：(0, 1, 1, 3)
5.什么时候用margin好，什么时候用padding好？
需要在border外侧添加空白时。空白处不需要背景（色）时使用margin。
需要在border内测添加空白时。空白处需要背景（色）时用padding。
margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。
6.手机分辨率和网页中的px是一回事吗？
不是，css中的px是一个相对的长度单位。手机有DPR，值得是设备像素和css像素的比值。比如DPR是2.0，设备分辨率640*1136，实际css中的px是320*568
明天计划的事情：
看看任务四
遇到的问题：
因为浏览器默认字体大小是16px，网上基本是将根目录font-size设置成62.5%。这样1rem就想到与10px。举例：在任务总下面两个圆形图案切图下来是84px，使用8.4rem后图片还是相对于整体大很多。原因是iphone 8的输出像素是375*667。然后看到了有的是设置font-size 312.5%。这方面不是特别理解，还望师兄可以解惑
收获：
学会使用rem进行自适应调节。
返回列表
评论