標籤：function font view 實現 script title set ack doc
原生實現rem響應式
<!DOCTYPE html><html style="font-size: 100px"><head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> <title></title> <script> /*讓文字和標籤的大小隨著螢幕的尺寸做變話 等比縮放*/ var html = document.getElementsByTagName(‘html‘)[0]; console.log(html); /*取到螢幕的寬度*/ var width = window.innerWidth; console.log(width); /* 640 100 320 50 */ var fontSize = 100/640*width; console.log(fontSize); /*設定fontsize*/ html.style.fontSize = fontSize +‘px‘; window.onresize = function(){ var html = document.getElementsByTagName(‘html‘)[0]; console.log(html); /*取到螢幕的寬度*/ var width = window.innerWidth; console.log(width); /* 640 100 320 50 */ var fontSize = 100/640 * width; console.log(fontSize); /*設定fontsize*/ html.style.fontSize = fontSize +‘px‘; } </script> <style> body,html{ margin: 0; padding : 0; } div{ width: 5.28rem; height: 1rem; background: red; color: #fff; font-size: 0.16rem; } </style></head><body> <div>AAA</div></body></html>
jq實現rem響應式
$(function(){ $(window).on(‘resize‘,function(){ var width=$(window).width(); var fontSize=(width/640)*100; $(‘html‘).css(‘font-size‘,fontSize) }).trigger(‘resize‘)})
網頁響應式媒體查詢代碼
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
