rem與less適配

時間 2021-08-14

標籤 css html app less ide scala htm rem 欄目 CSS 简体版

原文原文鏈接

<!doctype html>
<html lang="en"  >
<head>
    <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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>rem與less適配</title>
    <link rel="stylesheet" href="./css/app.css">
</head>
<body>
<div id="box">

</div>
<script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'
    //   最終
    window.onresize = function(){
        // 設置新的 font-size
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'
    }


</script>
</body>
</html>

*{  margin:0;  padding:0;}@fontSize: 375 / 10rem;#box{  width:335 / @fontSize;  height:144/ @fontSize;  margin:.50/ @fontSize auto;  background:#999;}

1. less+rem迭代適配
2. rem適配佈局（rem+less+媒體查詢和 rem+flexible.js）
3. rem適配
4. react適配 rem px to rem
5. rem適配佈局
6. REM適配實踐
7. H5 端 rem 適配方案與 viewport 適配
8. 移動端適配之REM
9. H5移動端rem適配
10. rem適配移動設備
更多相關文章...
• IP地址分配（靜態分配+動態分配+零配置） - TCP/IP教程
• SQL 通配符 - SQL 教程
• 適用於PHP初學者的學習線路和建議
• IntelliJ IDEA 代碼格式化配置和快捷鍵

相關標籤/搜索