移動端rem布局的兩種實現(xiàn)方法
發(fā)布時間：2018-01-03 08:49:29 作者：佚名 
我要評論
我要評論現(xiàn)在有兩種rem布局的樣式控制，其中一種是通過css的媒體查詢，另外一種是通過引入js來控制，這兩種方法各有各的優(yōu)點，但是我還是喜歡用引入js的方法來實現(xiàn)rem布局
據(jù)了解，現(xiàn)在有兩種rem布局的樣式控制，其中一種是通過css的媒體查詢，另外一種是通過引入js來控制，這兩種方法各有各的優(yōu)點，但是我還是喜歡用引入js的方法來實現(xiàn)rem布局，盡管現(xiàn)在市面上大多數(shù)都在使用css媒體查詢的方式實現(xiàn)，在此我就將這兩種方法做一總結：
方法一：常用方法，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文件就可以實現(xiàn)，在加載頁面的過程中，請求的文件較少，但是如果使用的兩個移動端設備屏幕寬度相差不大，都在媒體查詢所設置的同一區(qū)間，那么頁面中的文字大小等不會變化，可是使用引入js的方法就不一樣了。
方法二：引入js
// 需求：根據(jù)設計圖的比例去動態(tài)設置不同屏幕下面對應的font-size值
// 這段JS不要添加入口函數(shù)，并且引用的時候放到最前面
// ui的大小根據(jù)自己的需求去改
// 設計圖的寬度
var ui = 750;
// 自己設定的font值
var font = 40;
// 得到比例值
var ratio = ui/font;
var oHtml = document.documentElement;
var screenWidth = oHtml.offsetWidth;
// 初始的時候調(diào)用一次
getSize();
window.addEventListener('resize', getSize);
// 在resize的時候動態(tài)設置fontsize值
function getSize(){
screenWidth = oHtml.offsetWidth;
// 限制區(qū)間
if(screenWidth <= 320){
screenWidth = 320;
}else if(screenWidth >= ui){
screenWidth = ui;
}
oHtml.style.fontSize = screenWidth/ratio + 'px';
}
這種通過引入js的方法，面對不同尺寸的移動端設備，都能實現(xiàn)文字大小等尺寸的細微變化。
相關文章
移動端使用 rem 單位時 css sprites 定位問題的解決
現(xiàn)在開發(fā)移動端 wap 頁面，相信大家都會使用強大的 rem 單位去適配各種機型和屏幕；這篇文章主要介紹了移動端使用 rem 單位時 css sprites 定位問題的解決，小編覺得挺不錯2018-06-20- 這篇文章主要介紹了詳解H5 活動頁之移動端 REM 布局適配方法的相關資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-07
- 這篇文章主要介紹了手機端用rem+scss做適配的詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-15
淺談移動端的自適應布局問題(響應式、rem/em、Js動態(tài))
本篇文章主要介紹了淺談移動端的自適應問題(響應式、rem/em、Js動態(tài)),非常具有實用價值，需要的朋友可以參考下2017-11-01- 下面小編就為大家?guī)硪黄獪\析rem和em和px vh vw和% 移動端長度單位。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-04-28
- 這篇文章主要介紹了移動 web 端屏幕適配(rem)。詳細的介紹了移動 web 端屏幕適配（rem），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-25
