阿里企业邮箱特色功能与优势：为何选择桑桥网络代理商
在信息化时代，企业邮箱已成为公司日常运营中不可或缺的一部分。选择一款高效、安全... ...
媒体查询功能在网站设计当中的应用
发表时间：2014-04-04
作为从事金华微信网站设计的工程师们都知道CSS3支持CSS2．1所支持的所有媒体类型，例如屏幕显示、打印设置和手提设备等，同时也增添了许多新媒体功能：包括最大宽度、设备宽度、屏幕定向和颜色选项。CSS3发布之后出现的新设备，比如iPad和Android设备，都完全支持这些属性。因此，通过媒体查询功能为这些新设备设置其样式应该没什么问题，我们暂时不考虑那些不支持CSS3的旧电脑浏览器。
如果浏览器在屏幕上呈现页面(非打印类，等等)，而且屏幕宽度(不非得是可视窗口)小于等于480像素，那就加载shetland．CSS样式表。CSS3的新功能中也包括屏幕定向(横屏和竖屏对比)，设备宽度，最小设备宽度等等。我们可以创建多层样式表，以及多种基本页面布局以适应不同的宽度范围。min．width(最小宽度)和max．width(最大宽度)两个功能的发挥完全如其所说，min．width属性能够设置浏览器或屏幕的最小宽度值，然后可以应用某个特定的样式表组合(或者独立的样式表)。如果一切低于这个限制，那么样式表链接或样式就可以忽略不计。而max-width功能刚好相反，如果高于特定浏览器或屏幕最大宽度值，都无法应用到相应的媒体查询属性。
虽然上述最大和最小宽度值都可以应用到屏幕与浏览器宽度中，我们有时候会希望媒体查询作用于特定的设备宽度。这就是说不管浏览器或其他可视区有没有最小化到某个较小的尺寸，媒体查询仍然能够作用于设备的实际尺寸。最小设备宽度和最大设备宽度的媒体查询属性可用来很好地判断设备屏幕尺寸，而不需要在浏览器中将相同的样式应用到其他的全屏尺寸中，全屏尺寸由设备尺寸决定。
有些设计师也会倾向于为特定的媒体查询使用独立的样式表格。如果结构利益高于效率损耗的话，这样做也完全没问题。对于那些无法切换屏幕定向，或无法手动改变浏览器宽度的设备而言，使用独立的样式表应该是个不错的选择。比如，对于iPad这类设备，你或许会想将媒体查询整合到一个样式表中，因为这种设备可以实现横屏竖屏随意切换，如果这两种媒体查询分别放在独立的样式表中，用户每次切换屏幕定向时，网站就得同时启用每个样式表文件。所以，将iPad的横竖屏定向的媒体查询整合在同一个样式表文件中效率会更高。
随机推荐查看更多
网站备案：