课件1.3.3CSS3媒体查询CSS3多列布局.pptxVIP

CSS3媒体查询、CSS3多列布局; 响应式布局是在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，越来越多的网站采用这个技术。 ; 响应式设计一定是最佳选择吗？ 如果预算充足且形势需要，做一个真正的“手机版”网站是首选。因为响应式设计没有专门设计一个手机版网站的功能多，比如获取当前用户的GPS定位，只是用响应式设计会很难实现。但如果只是根据视口大小为用户提供匹配的视觉效果还是优先选择响应式设计。 优点： 1.面对不同分辨率设备灵活性强 2.能够快捷解决多设备显示适应问题 缺点： 1.兼容各种设备工作量大，效率略慢 2.代码累赘，会出现隐藏无用的元素，加载时间加长 3.其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果 4.一定程度上改变了网站原有的布局结构，会出现用户混淆的情况; 虽然响应式布局虽然不是适用所有场合，但许多的网站已经在使用它来解决实际的问题，而且面试时经常会被问到。 网站案例 米客网 / 小云网 /portal.php; CSS中的Media Query（媒介查询）是什么？ 作为CSS3规范的一部分，媒体查询可以针对不同的屏幕尺寸设置不同的样式，它为每种类型的用户提供了最佳的体验，网站在任何尺寸设置下都能有最佳的显示效果。 通过不同的媒体类型和条件定义样式表规则。 媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。 媒体查询的大部分媒体特性都接受min和max用于表达“大于或等于”和“小与或等于”。如：width会有min-width和max-width Media Queries功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式;媒体查询实例 通过此实例观察媒体查询的功能后，再来分析语法 body{ background-color:grey; //正常情况是灰色 } @media screen and (max-width:960px){ //分辨率最大不超过960的情况下，背景色为红色 body{ background-color:red;} } @media screen and (max-width: 768px){ body{ background-color:orange; } } @media screen and ( max-width: 550px){ body{ background-color:yellow; } } ;@media mediatype and|not|only (media feature) { CSS-Code; } 以上通过@media定义媒体查询，mediatype代表了设备类型，目前只有screen最常用，and|not|only为条件，media feature为媒体特点，通常是写设备的宽度。 @media screen and (max-width:960px) 的意思为：当前设备为screen（电脑、平板、手机）时，并且最大宽度为960时，显示的样式。 ; 用媒体查询改造我们的设计 我们都知道，样式表里面，后面的样式会覆盖前面的样式。因此，我们可以在设置好网站基本样式后，使用媒体查询来进一步重写相应的部分。例如，在PC端将导航显示成简单的链接，然后再针对小视口，使用媒体查询重写这一部分。理论上讲最好是从小屏幕设备开始设计，然后渐进增强。但实际上我们使用媒体查询要解决的问题，都是已经存在PC端站点了，更多的是要将现有的桌面版网页改造成响应式的。 加载媒体查询的最佳方法 使用多个独立的CSS文件会增加HTTP请求的数量，使页面加载变慢。所以我们的媒体查询样式的文件尽量放在一个里面，以注释加以区分。;阻止移动浏览器自动调整页面大小 ios和android浏览器都基于webkit内核，这两种浏览器和许多其它浏览器都支持用viewport meta元素覆盖默认的画布缩放设置。只需要在HTML的hea