前端-响应式布局

      • 响应式基本语法
      • 响应式外部样式
      • 如何创建响应式布局

响应式基本语法

响应式布局的优缺点

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

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



<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背景色在临界值发生改变

响应式外部样式



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


        
        <link rel="stylesheet" href="css/index.css" />

        
        <link rel="stylesheet" href="css/media1200.css" media="screen and (min-width:1200px)" />

        
        <link rel="stylesheet" href="css/media640-1200.css" media="screen and (min-width:640px) and (max-width:1199px)"/>

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



前端-响应式布局_第1张图片

这里写图片描述

如何创建响应式布局


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

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



你可能感兴趣的:(个人总结)