在网页开发设计的过程中，很多时候我们会有一个这样的需求，就是我们在PC端设计的网页要按样式一，而在移动端需要按样式二显示。没错，这种设计思路就是我们常说的自适应设计，在很多时候我们都会bootstrap框架做自适应的开发，但是我不知道有多少人会认真去看它的源码。很多时候读框架的源码是提示自己开发水平最有效的方法，任何框架的都适用。

HTML5/CSS3 已经成为时代的发展趋势，在 HTML5 带来的许多实用功能之后，CSS3也同带来了一些牛逼哄哄的功能呢。许多之前必须用 JS 或 JQ 写的效果，现在几行 CSS3 代码就够了。今天小编说的就是CSS3 @media的使用方法，通过一个小案例来简单说下@media的使用方法。

现在我有这样一个需求，我的网站首页需要插入780px宽度的百度广告，但是这个广告的尺寸是固定，那么现在就回造成一个这样的问题，如果我现在用手机去访问时，那么那个广告长度还是780px，会把网页撑的很宽同时还会有个左右移动的滚动条，非常难看影响整体的网页美感。

那么现在我用@media解决这一问题，我用css样让改广告在PC端显示，而在移动端隐藏。首页使用@media之前，我们必须在中添加一个标签：<meta name="viewport" content="width=device-width, initial-scale=1.0" user-scalable="no" />。

大概意思就是 视窗的宽度等于设备宽度，原始比例始终为 1:1 。这样在改变 device-width 的时候任意变化修改都能自适应了。添加meta标签后我们只需添加这样一行代码就能解决我们的问题了@media screen and (min-width:320px) and (max-width:1023px){.mob-hidden{display:none;}}。它的意思就是当屏幕的宽度在这个范围之内，mob-hidden类的样式生效，display:none即隐藏带mob-hidden的div，所有我们只需要在广告代码外面包一层div即可：<div class="mob-hidden">广告代码</div>。最后看看效果，发现广告确实消失了。