據了解,現在有兩種rem佈局的樣式控制,其中一種是透過css的媒體查詢,另一種是透過引入js來控制,這兩種方法各有各的優點,但是我還是喜歡用引入js的方法來實現rem佈局,儘管現在市面上大多數都在使用css媒體查詢的方式實現,在此我就將這兩種方法做一總結:
方法一:常用方法,css媒體查詢
@media only screen and (max-width: 600px), only screen and (max-device-width:400px) { html,body { font-size:50px; } } @media only screen and (max-width: 500px), only screen and (max-device-width:400px) { html,body { font-size:40px; } } @media only screen and (max-width: 400px), only screen and (max-device-width:300px) { html,body { font-size:30px; } } .box{ border: 1rem solid #000; font-size: 1rem; }
對於這種方法而言,他僅僅通過css文件就可以實現,在加載頁面的過程中,請求的文件較少,但是如果使用的兩個移動端設備螢幕寬度相差不大,都在媒體查詢所設定的同一區間,那麼頁面中的文字大小等不會變化,可是使用引入js的方法就不一樣了。
方法二:引入js
// 需求:根据设计图的比例去动态设置不同屏幕下面对应的font-size值 // 这段JS不要添加入口函数,并且引用的时候放到最前面 // ui的大小根据自己的需求去改 // 设计图的宽度 var ui = 750; // 自己设定的font值 var font = 40; // 得到比例值 var ratio = ui/font; var oHtml = document.documentElement; var screenWidth = oHtml.offsetWidth; // 初始的时候调用一次 getSize(); window.addEventListener('resize', getSize); // 在resize的时候动态设置fontsize值 function getSize(){ screenWidth = oHtml.offsetWidth; // 限制区间 if(screenWidth <= 320){ screenWidth = 320; }else if(screenWidth >= ui){ screenWidth = ui; } oHtml.style.fontSize = screenWidth/ratio + 'px'; }
這種透過引入js的方法,面對不同尺寸的行動裝置,都能實現文字大小等尺寸的細微變化。
相關建議:
JavaScript中rem佈局在react中的應用_javascript技巧
#以上是兩種行動端rem佈局實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!