據(jù)了解，現(xiàn)在有兩種rem布局的樣式控制，其中一種是通過(guò)css的媒體查詢，另外一種是通過(guò)引入js來(lái)控制，這兩種方法各有各的優(yōu)點(diǎn)，但是我還是喜歡用引入js的方法來(lái)實(shí)現(xiàn)rem布局，盡管現(xiàn)在市面上大多數(shù)都在使用css媒體查詢的方式實(shí)現(xiàn)，在此我就將這兩種方法做一總結(jié)：
方法一：常用方法，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;}對(duì)于這種方法而言，他僅僅通過(guò)css文件就可以實(shí)現(xiàn)，在加載頁(yè)面的過(guò)程中，請(qǐng)求的文件較少，但是如果使用的兩個(gè)移動(dòng)端設(shè)備屏幕寬度相差不大，都在媒體查詢所設(shè)置的同一區(qū)間，那么頁(yè)面中的文字大小等不會(huì)變化，可是使用引入js的方法就不一樣了。
方法二：引入js
// 需求：根據(jù)設(shè)計(jì)圖的比例去動(dòng)態(tài)設(shè)置不同屏幕下面對(duì)應(yīng)的font-size值// 這段JS不要添加入口函數(shù)，并且引用的時(shí)候放到最前面// ui的大小根據(jù)自己的需求去改// 設(shè)計(jì)圖的寬度var ui = 750;// 自己設(shè)定的font值var font = 40;// 得到比例值var ratio = ui/font;var oHtml = document.documentElement;var screenWidth = oHtml.offsetWidth;// 初始的時(shí)候調(diào)用一次getSize();window.addEventListener('resize', getSize);// 在resize的時(shí)候動(dòng)態(tài)設(shè)置fontsize值function getSize(){ screenWidth = oHtml.offsetWidth; // 限制區(qū)間 if(screenWidth <= 320){ screenWidth = 320; }else if(screenWidth >= ui){ screenWidth = ui; } oHtml.style.fontSize = screenWidth/ratio + 'px';}這種通過(guò)引入js的方法，面對(duì)不同尺寸的移動(dòng)端設(shè)備，都能實(shí)現(xiàn)文字大小等尺寸的細(xì)微變化。
新聞熱點(diǎn)
疑難解答
圖片精選
