預設字體大小是16px 在<html>中設置字體大小 與em的區別： em是在父級設置字體大小受影響 移動端適配 首先獲取屏幕的寬度 計算當前屏幕寬度和640的比例 計算出font-size的值 改變html的font-size的值 <!DOCTYPE html> <html lang="en" s ...
rem：移動web開發
-
預設字體大小是16px
-
在
<html>中設置字體大小 -
與em的區別：
- em是在父級設置字體大小受影響
-
移動端適配
-
首先獲取屏幕的寬度
-
計算當前屏幕寬度和640的比例
-
計算出font-size的值
-
改變html的font-size的值
<!DOCTYPE html> <html lang="en" style="font-size: 100px;"> <head> <meta charset="UTF-8"> <title>rem</title> <style> * { margin: 0; padding: 0; } div { width: 6.4rem; height: 6.4rem; background-color: pink; font-size: .14rem; margin: 0 auto; } p { width: 50%; height: 50%; background-color: skyblue; } </style> </head> <body> <div> <p>這是一個p</p> </div> </body> </html>
第一種：
window.onresize = function(){ var html = document.getElementsByTagName('html')[0]; var width = html.offsetWidth; console.log(width); html.style.fontSize = (width>=640?640:width)/640*100 + 'px'; };
第二種：
-
var html = document.getElementsByTagName('html')[0]; if(html){ var w = window.innerWidth; var fontSize = (w>640?640:w)/640 * 100; html.style.fontSize = fontSize + 'px'; } window.onload = function(){ window.onresize = function(){ var w = window.innerWidth; console.log(w); var fontSize = (w>640?640:w)/640 * 100; html.style.fontSize = fontSize + 'px'; } }
-
