首页 > 代码库 > 移动端的适配

移动端的适配

2024-09-03 00:27:16   216人阅读

<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="http://www.mamicode.com/static/css/common.css" rel="stylesheet" type="text/css">
    <link href="http://www.mamicode.com/css/index.css" rel="stylesheet" type="text/css">
    <script src="http://www.mamicode.com/static/js/flexible_css.js"></script>
    <script src="http://www.mamicode.com/static/js/flexible.js"></script>
</head>

2. 布局

i. 基本布局：rem

将视觉稿中的px单位转换成rem单位 ：

html元素尺寸 =  视觉稿px值 / rem基准值

例如：视觉稿宽度750px，则html中的缩放倍率就是750 / 10 = 75，然后以这个为基准值，如果视觉稿中某块小内容宽度是150px，则html中这块内容宽度就是 150 / 75 = 2rem

移动端的适配


联系
我们