CSS3中的@media具体帮助网站做了什么

在进行网站建设过程中网站的样式是不必可少的，在以前的时候大多的样式都需要通过很多的标签或者JS来实现，其中还有浏览器的兼容性问题的存在，后来推出了html5和css3解决了很多问题。

其中@media又叫做媒体查询，它是css3新出的属性，是为了解决如：手机，平板，电脑等不同设备上html5的样式不同影响用户体验，以前会单独为手机端制作单独的网站，后来通过媒体查询来完成手机的网站改造，也就是常说的响应式布局。通过检查设备尺寸来对不同的设备进行不同的布局，结合css3的新属性，可以快速的将电脑端网站改造成手机端可以使用的网站，无需再度制作手机端网站。

在使用@media时需要选择指定的类型例如：all(全部)，screen(电脑，平板，手机)，print(打印机)，speech(语音识别设备)。也可以通过描述设备显示区域的宽高来进行不同的布局。同时还可以通过orientation来描述设备的方向，值为portrait(竖屏)或landscape(横屏)。还有resolution来描述设备的分辨率。还可以通过and操作符来同时匹配多个条件，或or匹配其中一个条件。

一般而言会使用rem来作为响应式的单位，通过@media来修改html的字体大小。在使用媒体查询时要注意放在css文件的底部，同时按照从小到大的顺序进行书写。

@media是一个非常强大的功能可以减少很多不同设备上页面问题，同时还可以提高开发者的效率在以后的网站制作中是必不可少的。