移动端

最新推荐文章于 2024-05-19 12:59:35 发布

懂鹏辉

最新推荐文章于 2024-05-19 12:59:35 发布

阅读量255

点赞数

分类专栏：流式布局文章标签：布局移动手机

本文链接：https://blog.csdn.net/qq_38263015/article/details/72764653

版权

流式布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.流式布局

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />

手机页面中在中加入这句话，可以让页面适应设备的宽度。

width=device-width–宽度为设备宽度，如果你的页面宽度小于设备宽度，就需要修改一下这个属性，不然的话会出现可以页面左右滑动，如ipad ios7中客户端页面。

initial-scale - 初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例

maximum-scale - 允许用户缩放到的最大比例

user-scalable - 用户是否可以手动缩放

<div class="jd_layout">
        <!--top搜索-->
        <div class="jd_search clearfix">
           <div class="jd_search_box">
               <a class="icon_logo" href="#"></a>
               <form action="">
                   <a href="#" class="icon_search"></a>
                   <input type="search" placeholder="买鞋买买买"/>
               </form>
               <a href="#" class="login">登录</a>
           </div>
        </div>

  </div>

/*主体容器*/
.jd_layout{
    max-width: 640px;/*要基准与设计稿  640px*/
    min-width: 320px;/*保证最小宽度  布局不错乱*/
    width: 100%;
    margin: 0 auto;
}
.jd_search {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}
.jd_search .jd_search_box {
    background-color: rgba(201, 21, 35,0);
    margin: 0 auto;
    height: 40px;
    width: 100%;
    max-width: 640px;
    min-width: 320px;
    position: relative;
    padding-top: 5px;
}
.jd_search .jd_search_box .icon_logo {
    display: block;
    background-position: 0 -103px;
    position: absolute;
    top: 3px;
    left: 15px;
    width: 60px;
    height: 40px;
}
.jd_search .jd_search_box form {
   width: 100%;
   height: 30px;
    padding-left: 75px;
    padding-right: 50px;
    position: relative;
}
.jd_search .jd_search_box form .icon_search {
    width: 20px;
    height: 20px;
    background-position: -60px -109px;
    position: absolute;
    top: 4px;
    left: 90px;
}
.jd_search .jd_search_box form input {
    width: 100%;
    height: 30px;
    border-radius: 15px;
    padding-left: 35px;
}
.jd_search .jd_search_box .login {
    display: block;
    position: absolute;
    top: 0;
    right: 8px;
    line-height: 40px;
    color: #ffffff;
}

2 媒体查询

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        /*PC版心*/
        .container{
            width: 1200px;
            height: 1200px;
            background: pink;
            margin: 0 auto;
        }
        /*
        1.在大屏设备 1200px-       版心容器   1170px   背景颜色  红色
        2.在中屏设备 992px-1200px  版心容器   970px    背景颜色  蓝色
        3.在小屏设备 768px-992px   版心容器   750px    背景颜色  黄色
        4.在超小屏设备 768px-992px 版心容器   100%     背景颜色  绿色
        */
        /*响应式开发的原理*/
        /*媒体查询实现不同终端的布局和样式的切换*/

        /*使用media query???*/
        /* @media screen 条件 and 衔接 空格 （写条件）*/
        /*1.在大屏设备 1200px-       版心容器   1170px   背景颜色  红色*/
        @media screen and (min-width: 1200px){
            /*写样式*/
            .container{
                width: 1170px;
                background: red;
            }
        }
        /*2.在中屏设备 992px-1200px  版心容器   970px    背景颜色  蓝色*/
        @media screen and (min-width: 992px) and (max-width: 1200px){
            /*写样式*/
            .container{
                width: 970px;
                background: blue;
            }
        }
        /*3.在小屏设备 768px-992px   版心容器   750px    背景颜色  黄色*/
        @media screen and (min-width: 768px) and (max-width: 992px){
            /*写样式*/
            .container{
                width: 750px;
                background: yellow;
            }
        }
        /*4.在超小屏设备 768px-992px 版心容器   100%     背景颜色  绿色*/
        @media screen and (max-width: 768px){
            /*写样式*/
            .container{
                width: 100%;
                background: green;
            }
        }
    </style>
</head>
<body>
    <!--响应式版心容器-->
    <div class="container">
    </div>
</body>
</html>

媒体查询使用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=0">
    <title>container</title>
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!--[if lte IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.min.js"></script>
    <![endif]-->
    <style>
        @media (min-width: 992px) and (max-width: 1200px) {
            .box{
                display: none;
            }
        }
        @media (max-width: 768px) {
            .box{
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="hidden-md hidden-xs">
            1.在大屏设备 显示<br>
            2.在中屏设备 不显示<br>
            3.在小屏设备 显示<br>
            4.在超小屏设备 不显示<br>
        </div>
    </div>

<script src="../lib/jquery/jquery.min.js"></script>
<script src="../lib/bootstrap/js/bootstrap.js"></script>
</body>
</html>

3 bootstrap 栅格化系统

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=0">
    <title>container</title>
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!--[if lte IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.min.js"></script>
    <![endif]-->
    <style>
        /*响应式布局容器*/
        .container{
            height: 200px;
            background: red;
        }
        .row{
            height: 100px;
            background: blue;
        }
        .row > div{
            height: 50px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <!--
        1.大屏   显示6个等份的列
        2.中屏   显示4个等份的列
        3.小屏   显示3个等份的列
        4.超小屏   显示2个等份的列
        -->
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
    </div>
</div>
<script src="../lib/jquery/jquery.min.js"></script>
<script src="../lib/bootstrap/js/bootstrap.js"></script>
</body>
</html>

懂鹏辉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端

1.流式布局<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />手机页面中在中加入这句话，可以让页面适应设备的宽度。width=device-width–宽度为设备宽度，如果你的页面宽度小于设备宽度，
复制链接

扫一扫

专栏目录