前端-响应式布局

响应式基本语法

响应式布局的优缺点

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

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


<!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 (分辨率条件)"



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值