前端开发CSS响应式布局

w3cfuns前端开发工具箱 vue前端开发面试题 前端开发需要哪些专业技能

响应式设计使用一项叫媒体查询css 功能,很容易检测出用户设备的屏幕大小。然后,据以提供替代或额外的css,可针对相应屏幕实现更加优化的体验。使用这种方式创建对设备有感知力的网站,被称为响应式设计。1. 小设备上的大布局iPad 和iPhone 会自动缩小页面以填满屏幕,但页面布局在iPhone 的小屏幕上根本没法看。特别是文字太小了。很明显,一种布局不能适应多种屏幕尺寸。我们需要一种能够检测屏幕大小的方法,然后相应地修改布局。简言之,就是需要让页面能够自己响应屏幕变化。下面我们就来看一看实现这一点需要哪些技术。首先就是媒体查询。响应式设计的要素
[tr][td]响应式设计包含三个重要的方面。 媒体查询:是一种css 语法,可以根据浏览器的特性,一般是屏幕或浏览器容器宽度提供css 规则; 流式布局:是使用em 或百分比等相对单位设定页面总体宽度,让布局能够随屏幕大小而缩放; 弹性图片:是使用相对单位确保图片再大也不会超过其容器。

  1. 媒体查询媒体查询是css 代码的容器,其中的CSS 只在某些条件(比如,当前页面要被打印或者要显示在某种类型或尺寸的屏幕上)具备时才会应用。媒体查询可以用两种方式来写:@media 规则和<link>标签的media 属性。安卓设备的屏幕大小千差万别,下面这个网页列出了针对iOS、安卓和Windows 设备的所有媒体查询:http://pugetworks.com/blog/2011/04/css-media-queries-for-targetingdifferent-mobile-devices/。2.1 @meidia规则@media print {nav {display:none;}}这条规则声明:如果当前页面要打印,那么就不显示nav元素。这里是把CSS 规则嵌套在了一个@media 规则中,乍一看似乎有点不太习惯。尽管可以把CSS 规则嵌套在媒体查询里,但媒体查询本身却不能互相嵌套。下面再看一个假设的示例其中涉及最大屏幕宽度。/只在屏幕宽度不大于568 像素时应用/@media screen and(max-width:568px) {.column {float:none;width:96%; margin:0 auto;}}对这个例子而言,如果页面是通过屏幕显示,而且该屏幕宽度不超过568 像素,那么CSS 就会取消带.column 类的元素的浮动,让布局区块上下堆叠,且让该元素宽度为屏幕的96%,同时在屏幕上居中。iPhone 4 的屏幕分辨率为320×480,而iPhone 5 的屏幕分辨率则为320×568(至少对浏览器和媒体查询来说是这么大,因为像素是翻倍使用的——物理像素在两个方向上都是这里值的两倍)。把max-width 设定为较大的iPhone 5 屏幕的最大宽度,可以保证布局各栏在所有iPhone 中都不再浮动,而是上下堆叠。 [color=white]谈谈媒体查[/color][table]
    [tr][td]媒体类型 最常用的媒体类型如下所示。 all:匹配所有设备; handled:匹配手持设备(小屏幕、单色、带宽有限); print:匹配分页媒体或打印预览模式下的屏幕; screen:匹配彩色计算机屏幕; 其他媒体类型还有braille(盲文点字触觉反馈设备)、embossed(盲文分页打印机)、projection(投影仪)、speech(语音合成器)、tty(电话机屏幕等固定宽度字符栅格设备)和tv(电视机)。[/td][/tr]
    [/table]
    要想详细了解这些媒体类型,请参考CSS 2.1 标准:http://www.w3.org/TR/CSS2/media.html。当然,任意时刻浏览器窗口中只能使用一种媒体类型。媒体类型从IE6 开始就得到支持了,但媒体特性到IE9 以上才得到支持。一般来说这并不是问题,因为我们使用媒体特性多数情况下都是为了检测平板电脑或智能手机等现代设备。 媒体特性也就是媒体某一方面的特征,一般带有min-或max-前缀。最常用的媒体特性如下。min-device-width 和max-device-width:匹配设备屏幕的尺寸;min-width 和max-width:匹配视口的宽度,例如浏览器窗口宽度;orientation(值为portrait和landscape):匹配设备是横屏还是竖屏。
    如果想通过媒体查询来根据用户对浏览器窗口的缩放重新调整布局,应该使用min-widthmax-width。要了解所有媒体特性,请参考CSS3 标准:http://www.w3.org/TR/css3-mediaqueries/#media1。
    可以使用逻辑运算符and、not、or 及关键字all、only 组合媒体类型和媒体特性。其中,only 关键字可以用来对不支持媒体查询的浏览器隐藏样式表。关于媒体查询中可以使用的逻辑运算符的详细信息,请参考这里:https://developer.mozilla. org/en-US/docs/CSS/Media_queries#Operator_precedence。这里有一篇关于媒体查询的扫盲文章,非常不错:http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml。至于要在IE8 及以下版本的IE 浏览器中使用媒体查询,可以使用腻子脚本Respond.js(参见本书附录末尾的“腻子脚本”)。
    2.2 <link>标签的media属性如果要通过媒体查询应用的CSS 规则非常多,那么就可以考虑使用<link>标签的media 属性设定条件,有选择地加载独立的样式表,我们前面一直都是在使用<link>标签向html 中链接样式表的。通过在<link>标签的media 属性中指定条件,可以有选择地加载样式表。
    下面这个例子在前面介绍@media 规则时展示过,但这次我们使用的是<link>标签的media 属性。<link type=”text/css” media=”print”href=”css/print_styles.css” /><link type=”text/css” media=”screen and(max-width:568px)” href=”css/iphone_styles.css” />结果都一样,即这里的CSS 样式表会根据media 属性中的指定的条件应用。而且,查看页面的如果是大显示器或iPad,则浏览器根本不会加载上面例子中的第二个样式表。第二个样式表只会被查看该页面的智能手机加载。那怎么使用媒体查询最直观呢?最直观的方式莫过于根据不同的断点来编写媒体查询。
    2.3 断点断点(breakpoint)在这里指的是媒体查询起作用的屏幕宽度,其写法类似如下形式。@media screen and (max-width:640px) { /CSS 规则/ }在这里,断点是640 像素宽。如果有设备的屏幕宽度等于或小于断点设定的宽度,那么后面的CSS就会起作用。可能有人会使用断点去匹配特定设备的屏幕宽度,但我认为最重要的,还是在屏幕变小的情况下,通过简化布局来确保可用性。换句话说,不要简单地用断点去匹配设备宽度,而是可以从慢慢地缩小浏览器窗口开始,在发现当前布局不合适的时候再确定断点,然后编写新样式。不要针对某款具体的设备,而要为宽度在某个范围内的屏幕提供替代的布局,该布局对于范围内的设备都应该适用。
    通过缩小浏览器窗口,能够直观地感受到当前布局在小屏幕上的效果。不过,毋庸置疑,必须还要在小屏幕设备上进行测试。平板电脑与小显示器尺寸接近,因此1000像素的断点(为屏幕小于等于1000 像素的设备提供样式)适合平板电脑。在这样做之前,我们先讲一讲怎么取消iPhone 和iPad 中“缩小适应”的默认行为。
    2.4 用<meta>标签设定视口如果你想让自己的页面布局适合这些小屏幕,首先就要盖这种自动缩小的设定。方法是在页面的<head>标签里添加一个<meta>标签:<meta name=”viewport” content=”width=device-width;maximumscale=1.0″ />这个<meta>标签告诉浏览器按照屏幕宽度来显示网页,不要缩小网页。虽然这样可以让布局以实际宽度显示,但在iOS 设备(如iPad 和iPhone)中却会引发一个已知的bug。
  2. 针对平板优化布局第7 章的网页(或布局)目前是固定的980 像素宽,而且在比980 像素更宽的浏览器窗口内会居中。随着浏览器窗口变窄,比如在平板电脑或手机上浏览这个页面时,布局的右边会被浏览器窗口切掉。为此,我想第一个断点应该设定在布局的固定宽度之上,即1000 像素。如果浏览器窗口变得比这个断点还要窄,那么我希望布局能够变成流动的,以便它能够自己缩小宽度来适合浏览器窗口。回忆一下,这个网页布局中的所有结构化元素,使用的都是auto 或者百分比宽度值,因此从固定到流动的转换很简单,只要把固定宽度的外包装元素设为百分比宽度就行了。
    百分比宽度体现了响应式设计的第二个要素——流动布局。随着布局宽度变窄——这里是在iPad 竖屏,即768 像素宽度的情况下,导航菜单已经压在了其左侧的页面标题上面。而中间的登录表单和博文链接也都盖住了部分博文内容。显然,菜单的定位方式及页眉下方的两栏布局不适合这么窄的屏幕。
  3. 针对智能手机优化布局我们需要在这个宽度上增加一个断点,我们还把图片宽度设定为40%,确保它们不可能比布局更宽。这个例子中使用的图片比较小,假如你使用的图片在小屏幕设备上比它们的容器还要宽,那么就需要在样式表中包含下面这条规则:img {max-width:100%;}这条规则可以确保这些大图永远不会比它们的容器更宽,同时也不会影响它们缩小。布局中所有堆叠元素的宽度都是用相对于浏览器窗口的百分比设定的,因此当设备在横屏和竖屏间切换时,布局元素能够从容地重新排放。针对竖屏进一步优化我们要专门为iPhone 竖屏再添加一个断点。
  4. 最后两个问题5.1 移动Safiri中的缩放bugSafari Mobile(iPhone 浏览器)中有一个bug,在设备从竖屏旋转到横屏时会导致缩放和重绘问题。有一个JavaScript 脚本可以解决这个重绘问题,我已经把它包含在完成后的html示例文件中了。要了解关于这个bug 的更多信息,请参考这里:http://webdesignerwall.com/tutorials/iphone-safari-viewport-scaling-bug。访问这里下载脚本:[https://gist.github.](https://gist.github.)com/901295。
    5.2 让下拉菜单支持触摸本章介绍了如何在响应式设计中运用媒体查询、流动布局和弹性图片,让同样的网页能够适应不同屏幕大小的设备。对于实现响应式设计中的一系列问题,没有完美的方案,而且任何人也不会有。因为响应式设计是当前最新的web 设计思想,而技术、浏览器和硬件都在迅速发展变化之中。

前端开发需要哪些专业技能 美团前端开发面试题 前端开发需要考研吗

» 本文来自:前端开发者 » 《前端开发CSS响应式布局》
» 本文链接地址:https://www.rokub.com/5313.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!