移動端適配rem

時間 2019-12-04

標籤移動適配 rem 欄目無線简体版

原文原文鏈接

如今前端大多數是用rem 佈局，獲取窗口的寬除以「一個數」 16，15，20，50，7.5，10.8，隨便你寫那個

每當在ps 裏面量一個 div 的高，你就得內心或者在計算器算一遍，好比div 高65，轉換成rem 是多少呢，css

好比在 iPhone5 屏幕寬320 ， 320➗16=20 因此 1rem就是20px，html

好比一個div 高65px前端

65/20=3.25rem ,算起來費勁less

2.解決方法 lesskoa

　　2.1下載koala佈局

　　若是是750 的設計圖，750/15=50，在750的窗口下，1rem=50pxspa

　在less 加上一句話scala

　@r：50rem；設計

　接下來設計圖量多高就寫多高，orm

　　好比div高 88px

　　div{

　　　　height:88/@r; //而後你看看css 文件，less 幫你算出來了，

　　}

<!DOCTYPE html>

<html>

<head>

<style>

*{padding: 0; margin: 0;}

.box{height: 200px; width: 16rem; background: red;}

</style>

(function(){

var html= document.documentElement;

var hWidth=html.getBoundingClientRect().width;

console.log(hWidth);

html.style.fontSize=hWidth/16 + "px";

})()

</script>

</head>

<body>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。