响应式布局之媒介查询和百分比

来源：互联网发布：win10网络不可用红叉编辑：程序博客网时间：2024/06/05 21:00

百分比

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>响应式布局</title>    <style type="text/css">        .container{            width: 600px;            margin:0 auto;        }        p.text{            float: left;            width: 60%;        }        div.img-wrap {            float: right;            width: 40%;        }        img.responsive {            /*这里一定需要max-width*/            max-width: 100%;            height: auto;        }    </style></head><body>    <div class="container">        <p class="text">响应式布局响应式布局</p>        <div class="img-wrap">            <img alt="" class="responsive" src="1.jpg" />            <p>transition</p>        </div>    </div></body></html>

媒介查询

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>响应式导航栏</title>    <style type="text/css">        @media screen and (max-width: 800px) {            .small-menu {                display: inline;            }            .large-menu {                display: none;            }        }        @media screen and (min-width: 801px) and (max-width: 1024px) {            .small-menu {                display: none;            }            .large-menu {                display: inline;                width: 100%;            }            .large-menu ul {                list-style-type: none;            }            .large-menu ul li {                display: inline;            }            .content {                width: 100%;            }        }        @media screen and (min-width: 1025px) {            .small-menu {                display: none;            }            .large-menu {                float: left;                display: inline;                width: 20%;            }            .content {                float: right;                width: 80%;            }        }    </style></head><body>    <div class="small-menu">        <select>            <option>首页</option>            <option>新闻</option>            <option>反馈</option>        </select>    </div>    <div class="large-menu">        <ul>            <li>首页</li>            <li>新闻</li>            <li>反馈</li>        </ul>    </div>    <div class="content">        这里是内容    </div></body></html>

媒介查询判断横竖屏

html {    font-size: 12px;}/*横屏*/@media screen and (orientation:portrait) {    p.a{        font-size: 1rem;    }}/*竖屏*/@media screen and (orientation:landscape) {    p.a{        font-size: 3rem;    }}

阅读全文

0 0