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

最新推荐文章于 2023-06-06 00:28:06 发布

输出是最好的学习

最新推荐文章于 2023-06-06 00:28:06 发布

阅读量1k

点赞数

分类专栏：前端文章标签：响应式布局 css 百分比媒介查询

本文为博主原创文章，转载请注明出处。

本文链接：https://blog.csdn.net/m0_37568521/article/details/77867313

版权

前端专栏收录该内容

72 篇文章 1 订阅

订阅专栏

百分比

<!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

收藏

觉得还不错? 一键收藏
0
评论
响应式布局之媒介查询和百分比

百分比<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>响应式布局</title> <style type="text/css"> .container{ width: 600px; margin:0 auto;
复制链接

扫一扫