发表于： 2019-12-13 19:54:37
1 1148
今天完成的事情：
1 移动端适配各个机型，link和@import的区别
明天计划的事情：
1 git使用
遇到的问题：
1 暂无
收获：
1 flexible方案：引用flexible插件后，在页面上统一用rem来布局(由于vw得到众多浏览器的兼容，这种方案已被官方弃用)
原理就是获取页面的视口宽度，1rem=布局视口的1/10。iPhone6为例：布局视口为375px，则1rem = 37.5px，这时UI给定一个元素的宽为75px(设备独立像素)，我们只需要将它设置为2rem(75/37.5)即可，当然每个都要计算很麻烦，所以我们可以用postcss-px2rem/ postcss-pxtorem等PostCSS的插件
2 vh、vw方案：把视口宽/高等分为100份，单位统一用vw，vh(flexible就是模仿这，因为早时vw还未得到很好的兼容)
例如视觉视口为375px，那么1vw=3.75px，这时UI给定一个元素的宽为75px(设备独立像素)，我们只需要将它设为20vw(75/3.75)，这比例也不用自己换算，可用PostCSS的 postcss-px-to-viewport 插件完成。写代码时，我们只需要根据UI给的设计图写px单位即可
因为iphoneX发布后，做了三个改动圆角，刘海，小黑条，为了适配这些手机。诞生了安全区域：就是不受那三个影响的可视窗口范围
属性viewport-fit= ;为了适配刘海手机诞生的，限制网页在如何在安全区域内展示，写在meta标签name="viewport"这个标签上，两个值如下(默认为auto，和contain效果相同)
contain: 可视窗口完全包含网页内容 cover：网页内容完全覆盖可视窗口
函数env、constant 写在css属性内，设定安全区域与边界的距离的函数，必须指定viweport-fit后才能使用这两个函数
四个参数：safe-area-inset-left / right / top / bottom 安全区域距离 左/右/上/下 边界距离
constant在iOS < 11.2的版本中生效，env在iOS >= 11.2的版本中生效，这意味着我们往往要同时设置他们
rel 搜索引擎可以利用该属性获得更多有关链接的信息，可等于如下：
stylesheet调用外部样式表(css) icon定义网站收藏夹图标
href Hypertext Reference超文本引用， 用来建立当前元素和文档之间的链接
常用的有：link、a。例如引用css时，浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理(在vue中也可/地址，引用router中组件地址)。
src：source引入。src指向的内容会嵌入到文档中当前标签所在的位置。
常用的有：img、script、iframe。当浏览器解析到该元素时，会暂停浏览器的渲染，知道该资源加载完毕。这也是将js脚本放在底部而不是头部得原因
url： 是互联网上标准资源的地址
互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它.
总结： href 是引用，与该页面有关联，当前文档和引用资源之间确立联系。scr是引入，与页面内容关联，用于替换当前元素。url它不是属性。
在vue中会产生scoped不起作用的问题。具体在上网址中/vue笔记中
两种语法：@import '···' || @import url('···')
注意：@import规则一定要先于除了@charset的其他任何CSS规则
在script中也可以引入样式(import'.css/.scss等' ，注意前不加@)
link与@import区别
1 link是XHTML标签，不仅能够加载CSS(还能定义rel链接等等)；@import是CSS提供的语法规则，只有导入样式表的作用
2 link引用CSS，在页面载入时同时加载；@import需要页面完全载入以后再加载
3 link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持(E5以上的才能识别)
4 link支持使用JSt控制DOM改变样式；而@import不支持。
返回列表
评论