在网页开发设计的过程中，很多时候我们会有一个这样的需求，就是我们在PC端设计的网页要按样式一，而在移动端需要按样式二显示。没错，这种设计思路就是我们常说的自适应设计，在很多时候我们都会bootstrap框架做自适应的开发，但是我不知道有多少人会认真去看它的源码。很多时候读框架的源码是提示自己开发水平最有效的方法，任何框架的都适用。
HTML5/CSS3已经成为时代的发展趋势，在HTML5带来的许多实用功能之后，CSS3也同带来了一些牛逼哄哄的功能呢。许多之前必须用JS或JQ写的效果，现在几行CSS3代码就够了。今天小编说的就是CSS3
media的使用方法，通过一个小案例来简单说下media的使用方法。现在我有这样一个需求，我的网站首页需要插入px宽度的百度广告，但是这个广告的尺寸是固定，那么现在就回造成一个这样的问题，如果我现在用手机去访问时，那么那个广告长度还是px，会把网页撑的很宽同时还会有个左右移动的滚动条，非常难看影响整体的网页美感。
PC端显示那么现在我用
media解决这一问题，我用css样让改广告在PC端显示，而在移动端隐藏。首页使用media之前，我们必须在中添加一个标签：metaname=viewportcontent=width=device-width,initial-scale=1.0user-scalable=no/。大概意思就是视窗的宽度等于设备宽度，原始比例始终为1:1。这样在改变device-width的时候任意变化修改都能自适应了。添加meta标签后我们只需添加这样一行代码就能解决我们的问题了mediascreenand(min-width:px)and(max-width:px){.mob-hidden{display:none;}}。它的意思就是当屏幕的宽度在这个范围之内，mob-hidden类的样式生效，display:none即隐藏带mob-hidden的div，所有我们只需要在广告代码外面包一层div即可：divclass=mob-hidden广告代码/div。最后看看效果，发现广告确实消失了。手机端显示