响应式布局

时间 2019-12-23

标签响应布局繁體版

原文原文链接

什么是响应式布局

响应式就是网页内容会随着访问它的视口及设备的不一样而呈现不一样的样式javascript

如何适配各类浏览器

从最简单的‘基本’作起，再逐步扩充，即渐进加强，这是比较简单的作法，而优雅降级则麻烦不少。
基本是相对的，首先要肯定平台，若是有较多用户再用IE9，那么得考虑IE9的基础，它支持什么特性，
若是用户可能是Android2，那么也要考虑相似的问题，不一样平台的'基础'体验是相差很大的。css

若是浏览器的开发成本超过了浏览器的用户创造的收益，那么就不为该浏览器开发特殊的版本html

响应式的一些方法

图片

img{
     /*最大只能够自身那么大*/
     max-width: 100%;
   }

若是把图片设置成width:100%，那么图片宽度就是父级的宽度，若是父级宽度比图片自己宽，那么图片就会被拉伸java

但单独设置max-width有些弊端，若是视口宽度过大，图片仍然会被拉伸，这时须要利用媒体查询chrome

媒体查询

媒体查询在媒体知足某一特定的条件下，改变布局，值得注意的是媒体查询的断点应该跟流行的设备无关
断点，就是某个宽度的临界点，断点应由内容和设计自己决定浏览器

例子，尝试改变浏览器大小试试效果ide

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
                body{
                  background: grey;
                }
                @media screen and (min-width: 320px){
                  body{
                    background: green;
                  }
                }
                @media screen and (min-width: 550px){
                  body{
                    background: yellow;
                  }
                }
                @media screen and (min-width: 768px){
                  body{
                    background: orange;
                  }
                }
                @media screen and (min-width: 960px){
                  body{
                    background: red;
                  }
                }
            
        </style>
    </head>
    <body>
        
    </body>
</html>

<link media="screen and (orientation: portrait) and (min-width: 800px), projection />

媒体查询能够用上and, not, or等关键词进行判断
逗号分隔的是每一个不一样的媒体，projection（投影机），没说明具体特性，表示任何投影机

看了这么多，也是时候具体了解下媒体查询了布局

语法：flex

@media 媒体类型 and (设备特性) {样式代码}

设备类型

all	全部设备
screen	电脑显示器
print	打印用纸或打印预览视图
handheld	便携设备
tv	电视机类型的设备
speech	语音和音频合成器
braille	盲人用点字法触觉回馈设备
embossed	盲文打印机
projection	各类投影设备
tty	使用固定密度字母栅格的媒介，如电传打字机和终端

设备特性

width 视口宽度
height 视口高度
device-width 渲染表面的宽度，即设备屏幕的宽度
device-height 渲染表面的高度，即设备屏幕的高度
orientation 设备方向是水平仍是垂直
aspect-ratio 视口的宽高比，16:4 -> aspect-ratio: 16/4
color 颜色组分的位深，min-color -> 设备至少支持16位深
color-index 设备颜色查找表的条目数，值必须是数值，且不能为负
monochrome 单色帧缓冲中表示每一个像素的位数，值必须是整数，不能为负
resolution 屏幕或打印分辨率
scan 针对电视的逐行扫描和隔行扫描, progressive 逐行；interlace 隔行
grid 设备基于栅格仍是位图

响应式小小小案例

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                color: #fff;
            }

            header,footer{
                min-height: 3.75rem;
                background: #000;
            }
            nav{
                position: relative;
            }
            
            nav ul{
                background: skyblue;
                min-height: 3.75rem;
                line-height: 3.75rem;
                list-style: none;
            }
            .menu{
                background: skyblue;
                min-height: 3.75rem;
                line-height: 3.75rem;
                list-style: none;
                width: 100%;
                flex-direction: column;
                position: absolute;
                z-index: 1000;
            }
            
            .hidden{
                display: none;
            }
            

            li{
                padding: 0 1rem;
            }
            li:hover{
                background: brown;
                cursor: pointer;
            }
            .flex{
                display: flex;
                
            }
            .justify-content{
                justify-content: space-around;
            }


            main{
                min-height: 28.9375rem;
                background: brown;
            }

            aside{
                min-height: 25rem;
                background: #546358;
                flex: 1;
            }
            aside ul{
                flex-direction: column;
                flex: 1;
            }
            aside ul li{
                height: 1.875rem;
                line-height: 1.875rem;
                margin: 1rem 0;
            }
            section{
                flex: 6;
            }
            article{
                min-height: 400px;
                width: 100;
                background: #754358;

            }


            /*根据须要隐藏显示类*/
           @media screen and (max-width: 1366px){
            .max-1008-display-none{

                display: block;
            }
            .max-768-none{
                display: none;
            }
           }
           @media screen and (max-width: 992px){
            .max-1008-display-none{
                display: none;
                 
            }
            .max-768-none{
                display: none;
            }
           }

           @media screen and (max-width: 768px){
            .max-768-none{
                display: block;
            }
           }
            
        </style>
    </head>
    <body>
        <header>
            <h1>响应式网页</h1>
            <nav>
                <ul class="flex menu max-768-none" id="menu">
                    <li id="caidan">菜单</li>
                    <li class="hidden">导航1</li>
                    <li class="hidden">导航1</li>
                    <li class="hidden">导航1</li>
                    <li class="hidden">导航1</li>
                    <li class="hidden">导航1</li>
                </ul>
            </nav>
            <nav>
                <ul class="flex justify-content">
                    <li>导航1</li>
                    <li>导航2</li>
                    <li>导航3</li>
                    <li>导航4</li>
                    <li>导航5</li>
                </ul>
            </nav>
        </header>
        <main class="flex">
            <aside class="max-1008-display-none">
                <ul class="flex">
                    <li>项目1</li>
                    <li>项目1</li>
                    <li>项目1</li>
                    <li>项目1</li>
                    <li>项目1</li>
                    <li>项目1</li>
                    <li>项目1</li>
                </ul>
            </aside>
            <section>
                <h2>主体内容</h2>
                <article>
                    
                </article>
            </section>
        </main>
        <footer></footer>


        <script type="text/javascript">
            let caidan = document.getElementById('caidan');
            let menu = document.getElementById('menu');

            caidan.onmouseenter = function(){
                let hiddens = document.getElementsByClassName('hidden');
                for(let i = 0; i<hiddens.length; ++i){
                    hiddens[i].style.display = "block";
                }
            }
            menu.onmouseleave = function(){
                let hiddens = document.getElementsByClassName('hidden');
                for(let i = 0; i<hiddens.length; ++i){
                    hiddens[i].style.display = "none";
                }
            }
        </script>
    </body>
</html>