这几天工作的总结,(手机前端

手机前端的准备工作

 

  html配置

 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>xxxxx移动端</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">
    <link rel="stylesheet" href="css/help2.css">
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/help2.js"></script>
    <script>
        //通过window.screen.width获取屏幕的宽度
        var offWidth = window.screen.width / 25; //这里用宽度/25表示1rem取得的px
        document.getElementsByTagName("html")[0].style.fontSize = offWidth + px; //把rem的值复制给*标签html的font-size
    </script>
</head>
<body>

css配置

 

*{
    padding: 0;
    margin: 0;
    list-style: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    font-family: "微软雅黑";
}
body{
    background-color: #f1f1f1;
}
a{
    text-decoration: none;
    color: inherit;
}

.clear{clear: both;}

 

关于单位,移动端以1rem 表示30px,   一般以750px表示最大宽度,所以,移动端的最大宽度 = 750/30 即25rem

 

关于移动端开发与网页端的不同:

  1,单位换算

    如果字体不设置font-size = xxxrem ,会显得非常小

    rem一般可以使用三位小数

开发移动端的注意事项:

   1,div设置了margin-top:xxrem,父元素也跟着跑,这是由于div的第一个元素假传圣旨,把父类的margin-top也同步了,这种情况设置父类元素的padding-top即可

这几天工作的总结,(手机前端

上一篇:Flask 第八篇 实例化Flask的参数 及 对app的配置


下一篇:iOS - 导航栏设置半透明或取消半透明