移动端使用rem同时适应安卓ios手机原理解析,移动端响应式开发

rem单位大家可能已经很熟悉,rem是随着html的字体大小来显示代表宽度的方法,我们怎样进行移动端响应式开发呢 浏览器默认的字体大小为16px 及1rem 等于 16px 如果我们想要使1rem等于 12px 只需设置html的字体大小为 12/16 及html的字体大小为font-size:75% html { font-size:75%;    <!–  12/16   –>} 我们再来看一下各个浏览器的屏幕宽度  iphone4  320  iphone5  320  iphone6  375  iphone6p  414 大部分的安卓手机屏幕显示宽度为 360   我们公司的设计是以iphone6为基础设计的 及以375的为准设计的 如果想在 iphone其他版本中按iphone6比例自动缩放那么我们需要进行简单的缩放运算,同时也以1rem等于12px为例  iphone4  320/375*75%  = 64%  iphone5  320/375*75%   = 64%  iphone6  375/375*75%    =75%  iphone6p 414/375*75%    =82.8%  安卓         360/375*75%    =72% 我们可以这样设置在不同媒体中的字体的rem比例 由于安卓和iphone6区别较小,所以设置时忽略其差异   html { -webkit-text-size-adjust: none; font-si […]

阅读全文