qq_40685439的博客

根据750的设计稿为例**方法一：**引入rem.js文件，具体的文件代码可参考：(function (doc, win) {var docEl = doc.documentElement,// orientationchange 当设备的方向变化（设备横向持或纵向）此事件被触发//判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。resizeEvt = 'orientationchange' in window ? 'orientatio

overflow: hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; 注意：此处是第三行溢出就用省略号代替，如果要改变行数的话， 修改 -webkit-line-clamp的数值就可以了。...

滚动条轨道样式可根据需要去设置 ::-webkit-scrollbar-track ，结果：

1.em在做手机端的时候经常会用到的做字体的尺寸单位说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。2.rem这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。参照后面给的demo3.vhvh就是当前屏幕可见高度的1%，也就是说hei

一、区别区别体现在子元素继承时，如下：父元素设置line-height:1.5会直接继承给子元素，子元素根据自己的font-size再去计算子元素自己的line-height。父元素设置line-height:150%是计算好了line-height值，然后把这个计算值给子元素继承，子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。二、举例比如父元素设置属性：font- size:14px;line-height:1.5,child设置font-

一.当两个元素为兄弟元素时：.father {width: 100px;height: 100px;background-color: aqua;margin-bottom: 10px;}.son {width: 50px;height: 50px;background-color: pink;margin-top: 30px;}结果：只显示最大的外边距30px二.当两个元素为父子元素时：1.当父元素有border或padding：.father {width: 100p

布局视口：指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度视觉视口：指用户正在看到的网站的区域，区域的宽度=移动设备的浏览器窗口的宽度理想视口：布局视口的大小和屏幕宽度一样的。...

通过一个demo测试这三个属性的差别。说明：scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。该demo就在页面中放一个textarea元素，采用默认宽高显示。情况1：元素内无内容或者内容不超过可视区，滚动不出现或不可用的情况下。scrollWidth=client