来谈谈响应式

随着手机端、Pad端用户的增长,我们一般会分别对手机端、Pad端用户单独开发一套页面,这样我们能更有针对性的对这些终端进行优化实现。看起来好像确实没有必要去做响应式。但是有时可能资源不足,直接用PC页面响应到pad也是有可能的。另外,在PC端,用户的屏幕尺寸其实还是参差不齐,会有一些小屏幕需要考虑(主要是1024x768)

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。响应式的好朋友之一媒体查询
通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。媒介查询的大部分媒介特性都接受min和max用于表达”大于或等于”和”小于或等于”。如:width会有min-width和max-width媒介查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML和XML中。通过这个标签属性,我们可以很方便的在不同的设备下实现丰富的界面,特别是移动设备,将会运用更加的广泛。
而css3的media query对上面的查询进行了增强,可以让我们根据设备的特性来设定不同的样式。媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成,可以检测的媒体特性包括:width(视口宽度)、height(视口高度)等等。
让我们一起来响应吧!!!

posted on 2016-07-08 17:00  烙印i  阅读(133)  评论(0编辑  收藏  举报

导航