相应式布局

来源：互联网发布：java 调用类中的方法编辑：程序博客网时间：2024/05/14 20:21

相应式布局

    使用的是css3中的Media Query(媒介查询)：        1. 设备的宽高：device-width,device-height        2. 渲染窗口的宽和高：width,height        3. 设备的手持方向：orientation        4. 设备的分辨率：resolution    使用方式        1.外联        2.内嵌

基础使用

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link href="style.css" type="text/css" rel="stylesheet"  media="only screen and (max-width:640px)" >    <style>        @media screen and (min-width: 640px){            body{                background-color: brown;            }        }    </style></head><body></body></html>

实现屏幕在大于640px和小于640px的不同布局

实例操作

html代码

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <!--viewport 当前屏幕的宽高   width = device-width,initial-scale=1  宽度等于当前设备的宽度 缩放比例为1-->    <meta name="viewport" content="width = device-width,initial-scale=1">    <title></title>    <link href="style1.css" type="text/css" rel="stylesheet"></head><body>    <div class="heading"></div>    <div class="container">        <div class="left"></div>        <div class="main"></div>        <div class="right"></div>    </div>    <div class="footing"></div></body></html>

对应的css

*{    margin: 0px;    padding: 0px;}.heading,.container,.footing{    margin: 10px auto;}.heading{    height: 100px;    background-color: aqua;}.left,.right,.main{    background-color: aquamarine;}.footing{    height: 100px;    background-color: beige;}@media screen and (min-width: 960px){    .heading,    .container,    .footing{        width: 960px;    }    .left,    .main,    .right{        float: left;        height: 500px;    }    .left,    .right{        width: 200px;    }    .main{        margin: 0px 5px;        width: 550px;    }    .container{        height: 500px;    }}@media screen and (min-width: 600px) and (max-width: 960px){    .heading,    .container,    .footing{        width: 600px;    }    .left,    .main{        float: left;        height: 400px;    }    .right{        display: none;    }    .left{        width: 160px;    }    .main{        width: 435px;        margin-left: 5px;    }    .container{        height: 400px;    }}@media screen and (max-width: 600px){    .heading,    .container,    .footing{        width: 400px;    }    .left,    .right{        float: left;        width: 400px;        height: 100px;    }    .main{        float: left;        width: 400px;        height: 180px;        margin: 10px 0px;    }    .container{        height: 400px;    }}

<meta name="viewport" content="width = device-width,initial-scale=1">这个比较重要不能忘记。viewport为当前屏幕的宽高 width = device-width,initial-scale=1 宽度等于当前设备的宽度缩放比例为1

0 0