前端设计>css>正文

手机站做自适应页面要注意的问题

2019-05-20 11:28 君语贤手机站注意自适应页面

首先需要在网站的meta信息里面加上：

其次对于网页居中问题要注意css样式代码的问题：

 * {margin:0 auto;padding: 0;border: 0;-webkit-user-select: text}

手机站做自适应页面要注意的问题

另外对于网页的初始宽度可以适应max-width来控制，其他容器也是类似，要避免直接出现定义body体的宽度。

附件：

网页参考源码：

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
        <title>Bootstrap 101 Template</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <link href="css/main.css" rel="stylesheet">
    </head>
    
    <body>
        <div id="top" class="">这是顶部信息</div>
        <div id="nav">这是导航栏
            <div id="">菜单</div>
            <div id="">左边</div>
            <div id="">右边</div>
        </div>
    </body>

</html>

CSS文件：

* {
    margin:0 auto;
    padding: 0;
    border: 0;
    -webkit-user-select: text
}
/*头部*/
 #top {
    max-width:680px;
    background-color:red;
}
#nav {
    max-width:680px;
    background-color: bisque;
}
.menu {
    max-width:680px;
    background-color: brown;
}
.cleft {
    width: 60%;
    min-height: 400px;
    float: left;
    background-color: #5FAD7E;
}
.cright {
    width: 40%;
    float: left;
    min-height: 400px;
    background-color: chocolate;
}
/*清浮动*/
 .clearfix:before, .clearfix:after {
    content:".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}
/* IE < 8 */
 .fl {
    float:left;
}
.fr {
    float:right;
}

本文链接：https://www.weguiding.com/css/442.html

上一篇:纯css实现导航处hot小图标实现
下一篇:CSS3水纹效果的示例代码

前端设计>css>正文

手机站做自适应页面要注意的问题

猜你喜欢