rem适配

px: 绝对单位, 给多少就是多少; 问题:不管屏幕尺寸怎么变化,它都不会变,做不到适配。

em:  相对单位,相对于自身字体大小的值;font-size:12px,1em=12px。  问题:①chrome下有最小字体限制,必须为12px,所以这个值不能小于12; ②如果两个一样的元素,但是里面字体不一样,那就不能统一设置了。或者元素字体变化了,就又要统一设置一遍。

rem:  CSS3新增的一个相对单位,相对于根节点(html)字体大小的值。html{font-size:12px;} 1rem=12px;默认情况下是16px。通过它就可以做到只修改根元素的大小,就能成比例地调整所有字体的大小。

rem适配_第1张图片

移动端问题

body下的overflow问题: body加了overflow:hidden;后横向没效果(IOS下,Andriod下没问题)

固定定位问题: ①固定定位在移动端的兼容性很不好,在以前老版本的安卓手机不支持,ios4以前的版本也不支持。② QQ浏览器下有时候往上滑动的话,就会隐藏掉header;③当打开键盘的时候,固定定位就是去作用了。

样式重置问题:①链接点击的时候默认有一个背景 -webkit-tap-highlight-color:rgba(0,0,0,0); ②按钮在ios下都是圆角 -webkit-apperance:none;  //清除输入框和按钮的默认外观;border-radius:0; ③每台设备里的默认字体是不一样的(移动端设备里大部分没有宋体与微软雅黑字体)font-family: helvetia; ④切换横竖屏或者用户自己通过浏览器设置的话,可以改变字体的大小(需要给body下的所有元素)-webkit-text-size-adjust:100%; ⑤长按文字ios下会选中文字,安卓无效;-webkit-user-select:none; ⑥固定定位在一些ios低版本中不兼容,以及一些国产手机里也不兼容。

你可能感兴趣的:(rem适配)