前端-响应式布局

最新推荐文章于 2024-06-28 21:22:19 发布

KrisChung

最新推荐文章于 2024-06-28 21:22:19 发布

阅读量1.6k

点赞数

分类专栏：个人总结

本文链接：https://blog.csdn.net/qq_39469688/article/details/82717088

版权

个人总结专栏收录该内容

43 篇文章 1 订阅

订阅专栏

响应式基本语法

响应式布局的优缺点

优点:面对不同分辨率设备，灵活性强，能够快捷地解决设备显示适应问题

缺点：兼容各种设备时所需工作量大丶效率低下丶代码累赘，会隐藏无用的元素，加载时间延长，
其实这是一种折中性质的设计解决方案，由于多方面元素影响而达不到最佳效果，在一定程度上
改变了网站原有的布局结构，会出现用户混淆的情况


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>

        <style type="text/css">

            *{margin:0px;padding:0px;}
            div{
                width:350px;
                height:150px;
                margin:200px auto;
                border:1px solid black;


            }


            /*
             *  响应式布局语法:
             *          浏览器窗口宽度大于等于1200px
                        语法必须空格隔开否则语法错误
                        当浏览器缩小时若不在响应式区间内则加载默认样式

             * */
            @media screen and (min-width:1200px){
                div{
                    background:purple;
                }
            }

            /*浏览器窗口宽度大于等于640px 小于等于1199px*/
            @media screen and (min-width:640px) and (max-width:1199px){
                div{
                    background:greenyellow;
                }
            }

            @media screen and (max-width:640px){
                div{
                    background:orange;
                }
            }


        </style>


    </head>
    <body>

        <div></div>


    </body>
</html>

页面效果:
随浏览器窗口大小缩小div背景色在临界值发生改变

响应式外部样式


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>


        <!-- 默认样式 -->
        <link rel="stylesheet" href="css/index.css" />

        <!-- 浏览器窗口宽度 大于等于1200px -->
        <link rel="stylesheet" href="css/media1200.css" media="screen and (min-width:1200px)" />

        <!-- 浏览器窗口宽度 大于等于640px 小于等于1200px -->
        <link rel="stylesheet" href="css/media640-1200.css" media="screen and (min-width:640px) and (max-width:1199px)"/>

        <!-- 浏览器窗口宽度 小于等于640px -->
        <link rel="stylesheet" href="css/media0-640.css" media="screen and (max-width:640px)"/>

        <!-- 竖屏-屏幕宽度小于高度 -->
        <link rel="stylesheet" href="css/portrait.css" media="all and (orientation:portrait)"/>

        <!-- 横屏-屏幕宽度大于高度 -->
        <link rel="stylesheet" href="css/landscape.css" media="all and (orientation:landscape)"/>





    </head>
    <body>

        <div></div>


    </body>
</html>

这里写图片描述

如何创建响应式布局


响应式布局基本语法为
@media screen and ()
括号内填写不同的分辨率大小，且响应式布局语法间需空格隔开否则语法错误

对于项目的响应式布局一般用外部样式，在link标签引入CSS样式中添加属性media
具体为media="screen and (分辨率条件)"

KrisChung

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录