基于HTML5的响应式展会信息移动平台设计与实现
方式，怎样才能做到让一种设计方案兼容所有情况将显得特别重要。我们的处理方案是让页面尽量弹性化，让文字、图片的尺寸可以自动调整，做到无论用户切换设备的屏幕定向方式，还是从台式机屏幕转到平板电脑或手机上浏览，页面都会真正富有弹性。下面是我们设计网站时使用HTML5和CSS3 Media Queries（层叠样式表媒介查询）相关技术来实现响应式Web设计的方案。1.1 CSS3 Media Queries-打造弹性布局结构实现自适应页面设计的关键之一是，使用CSS3根据分辨率宽度的变化来调整页面布局结构。CSS3支持CSS2.1所支持的所有媒体类型，例如screen、print、handheld等，同时还添加了很多涉及媒体类型的功能属性，包括max-width（最大宽度）、device-width（设备宽度）、orientation（屏幕定向，横屏或竖屏）等。现在的主流设备，如iPad或Android相关设备，都可以完美地支持这些属性。下面的几个例子，将展示如何使用CSS3 Media Queries实现不同的样式表。/*浏览器或屏幕宽度超过500px时使用*/@media screen and （min-width： 500px） {.myCl
<<上一页 下一页>>
广州市越秀区图书馆版权所有。
联系电话：020-87673002
本站访问人数：