响应式设计入门-02媒体查询：支持不同的视口教程方案.pptVIP

媒体查询：支持不同的视口;本章内容;;媒体查询语法;什么是媒体查询;;;;在 CSS 样式表中使用媒体查询(推荐);@import 指令;总结：媒体查询能检测那些特性;媒体查询可检测的特性;;加载媒体查询的最佳方法;实战：第一个响应式网页;!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=UTF-8 / titleAnd the winner isnt/title link href=css/main.css rel=stylesheet type=text/css / /head body div id=wrapper !-- the header and navigation -- div id=header div id=navigation ul lia href=#navigation1/a/li lia href=#navigation2/a/li /ul /div /div !-- the sidebar -- div id=sidebar phere is the sidebar/p /div !-- the content -- div id=content phere is the content/p /div !-- the footer -- div id=footer pHere is the footer/p /div /div /body /html;;#wrapper { margin-right: auto; margin-left: auto; width: 960px; } #header { margin-right: 10px; margin-left: 10px; width: 940px; background-color: #779307; } #navigation ul li { display: inline-block; } #sidebar { margin-right: 10px; margin-left: 10px; float: left; background-color: #fe9c00; width: 220px; };现在HTML和CSS都完成了，可以在浏览器中看一看。很正常。 缩小视口再看看，问题来了： 要么下方出现水平滚动条。 要么字缩小到没法看。（如在iphone6中） ;阻止移动浏览器自动调整页面大小;;meta标签;;;针对不同视口添加媒体查询;进一步修改css;响应式设计中内容始终优先