这几天工作的总结，（手机前端

手机前端的准备工作

 

  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即可

posted @ 2019-02-27 23:37  cl94  阅读(146)  评论(0)  编辑  收藏  举报