移動端的適配

時間 2019-11-18

標籤移動端的適配欄目無線简体版

原文原文鏈接

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <title>最新試卷</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link href="../static/css/common.css" rel="stylesheet" type="text/css">
    <link href="css/index.css" rel="stylesheet" type="text/css">
    <script src="../static/js/flexible_css.js"></script>
    <script src="../static/js/flexible.js"></script>
</head>

2. 佈局css

i. 基本佈局：remhtml

將視覺稿中的px單位轉換成rem單位：web

html元素尺寸 = 視覺稿px值 / rem基準值app

例如：視覺稿寬度750px，則html中的縮放倍率就是750 / 10 = 75，而後以這個爲基準值，若是視覺稿中某塊小內容寬度是150px，則html中這塊內容寬度就是 150 / 75 = 2rem佈局