快速入门响应式设计

来源：互联网发布：金融大数据平台编辑：程序博客网时间：2024/05/23 07:24

在移动时代，单纯学了DIV+CSS布局远远不够，还要学习响应式布局将设计的网页能在所有设备都能显示出最合适最好看的效果。说到响应式布局，可以学习和使用bootstrap这类优秀的响应式框架，但是觉得bootstrap太过臃肿或不自由，意图自己写轻量快速简单的代码的话，那就有必要学习CSS3和HTML5的新特性了。如果还是犹豫不知学习哪个的话，个人建议先学习HTML5和CSS3作为基础，那样在需要使用bootstrap来快速开发的时候只需一小时就学会了。

最简单的响应式就是应用CSS3的@media媒体查询，简单来说就是CSS代码也能判断当前使用的设备是屏幕还是打印机还是投影仪等等，然后根据不同设备写相应的代码来显示最佳的效果，老实说，个人最喜欢CSS，易学，直观，优雅，强大，跟JSON一样，写起来特别舒服和快捷。

首先来看一下最简单的@media的用法代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <style>        /*如果设备屏幕最大宽度为1200像素，则h1的字体显示蓝色*/        @media screen and (max-width:1200px){            h1{                color:blue;            }        }        /*如果设备屏幕最大宽度为900像素，则h1的字体显示粉红色*/        @media screen and (max-width:900px){            h1{                color:pink;            }        }        /*如果设备屏幕最大宽度为600像素，则h1的字体显示绿色*/        @media screen and (max-width:600px){            h1{                color:green;            }        }    </style></head><body>    <h1>        Hello,world!    </h1></body></html>

看注释应该能看懂吧，一般我写的注释只有我能看懂，所以我经常在项目里面注释/*如果你意图尝试修改我的代码，建议你放弃或重写吧，因为经过我优化的代码没人能看懂*/，虽然自认自己代码写得也不是特别好，但是我还是要装下逼，万一高手将我代码改得更好我能学习一下，万一碰到新手那我在其眼中就是大神了。回到正题，如果改一下上面style里面的代码，同样也能实现相同的功能：

        /*如果设备屏幕最小宽度为600像素，则h1的字体显示绿色*/        @media screen and (min-width:600px){            h1{                color:green;            }        }        /*如果设备屏幕最小宽度为900像素，则h1的字体显示粉红色*/        @media screen and (min-width:900px){            h1{                color:pink;            }        }        /*如果设备屏幕最小宽度为1200像素，则h1的字体显示蓝色*/        @media screen and (min-width:1200px){            h1{                color:blue;            }        }

对比两种功能一样的代码，我强烈推荐使用第一种方式，因为可能能减少浏览器的解析（为什么是可能，自己弄懂去）从而加快那么一点点速度，不过天下武功，唯快不破，所以快那么一点也是值得的。如果你是那么好学而勤快和谦虚的学生，也许你已经将上面的代码敲进sublime或者Atom或者其中编辑器并打开在浏览器看效果了，你会发现，字体的颜色没变嘛，别急，点击你浏览器右上角最小化旁边的窗口，然后将窗口横向拖着缩小窗口，你会惊奇地发现字体变色了，将浏览器的宽度拖到最小，再慢慢拖大，感受一下响应式的魅力吧。

那么我的这篇在床上躺着写出来的博客写完手工结束了吗？不，当然还没结束，我还要再讲多一点点东西，不过我不太喜欢多说，直接上代码，代码是最好的描述方式：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <style>        /*默认样式*/        .logo, .nav, .content, .footer{            width:90%;            padding:40px 5%;            background-color: #ccc;            text-align: center;            line-height: 1.5;            font-weight: bold;            float:left;        }        /*在媒体查询中，最好写需要更改的某个样式*/        /*如果设备屏幕最大宽度为1200像素，则应用样式*/        @media screen and (max-width:1200px){            .logo, .nav{                width:40%;                color:white;            }            .logo{                background-color: blue;            }            .nav{                background-color: green;            }            .content{                color:yellow;            }        }        /*如果设备屏幕最大宽度为900像素，则应用样式*/        @media screen and (max-width:900px){            .logo, .nav{                width:40%;            }            .content{                background-color: red;                color:white;            }            .footer{                font-weight: normal;            }        }        /*如果设备屏幕最大宽度为600像素，则应用样式*/        @media screen and (max-width:600px){            .logo, .nav{                width:90%;            }        }    </style></head><body>    <div class="logo">        LOGO    </div>    <div class="nav">        导航    </div>    <div class="content">        内容    </div>    <div class="footer">        底部    </div></body></html>

同理，勤奋好学的童鞋已经开始看这串代码的效果了，浏览器拖来拖去，画面变来变去好好玩对吧，眼尖的童鞋不觉得好玩了，因为会发现有那么一点点的问题，就是小于600像素的查询样式居然会延续应用了小于900像素的样式，这个是BUG吗？不是BUG，学过CSS都知道最新的样式会覆盖之前的样式，所以要么就在需用回之前的样式地方重新写样式，要么偷懒还有一种方式，就是媒体查询还有一种语法：

@media screen and (max-width:1200px) and (min-width:900px)@media screen and (max-width:900px) and (min-width:600px)

看得懂吗？应该一眼就看懂是什么意思了吧，如果看不懂真要面壁思过了，如果苦思冥想还是不懂，那就是我的问题了。到了这里，你应该了解到响应式要怎么写代码了，不过响应式设计知识网页设计的冰山一角，而且像这篇文章的内容不少书籍和大神的博客老早就写了一大堆。最后，当你在浏览器放大缩小做响应式网站做得很爽的同时，千万要记得在header标签加这串代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

没有这串，你手机显示的效果就不忍直视。这个是H5的meta新用法，想要改一下或了解更多属性的值和用法的请参阅手册或者W3C文档。谢谢观看。

0 0