七彩课堂[网页设计CSS教程系列]
响应式网页设计能够兼容多个终端
响应式网页设计能够兼容多个终端
响应式网页设计是Ethan Marcotte在去年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是为移动互联网而生的!
怎么做?
其实响应式网页的实现很简单,都是大家熟悉的技术。
media query(媒体查询)
因为现在主流的智能终端都是基于iOS和Android的,而它们自带的浏览器都是基于webkit内核,所以我们可以完全使用viewport属性和media query技术实现网站的响应性:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
后面的initial-scale表示初始缩放,maximum-scale表示最大缩放比例,1意味着不能进行缩放。
/* for 240 px width screen */
@media only screen and (max-device-width:240px){
selector{
}
}
/* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){
selector{
}
}
/* for 480 px width screen */
@media only screen (min-device-width:361px)and (max-device-width:480px){
selector{
}
}
当然依靠屏幕宽度来进行适配是最简单的方法,media query有很多参数可以使用比如orientation、aspect-ratio等。
其实,media query是响应式网页设计中被用到最多的技术。
不足之处
如果你关注网站性能之类的话,可能已经发现了一些问题:
加载很多不需要的资源,比如多余的图片和样式内容
带宽限制
移动终端的内存和CPU限制
图片大小和屏幕大小不匹配
嗯,任何一个方案都不是完美的,但也不会很糟糕。下面我们会提到一些可行的优化方案:
响应式网页设计被提出以来,争论就不断,其实核心问题只有两个个:太多的资源请求和有限的终端支持之间的矛盾、响应式的网页设计和移动终端在用户体验和视觉风格上的差异。前者不能容忍在弱小的手机/平板上通过龟速的3G/2G网络来加载一个笨重的PC端页面,而后者纠结响应式网站不像手机网站。
信息推荐
资讯中心 | 电子商务 | 搜索营销 | 设计学院 | 中医养生 | 养生保健 | 节日祝福 | 民俗文化 | 奇闻趣事
建站知识 | 人世百态 | 网站导航 | 传统节日 | 搜索热点 | 星座运势 | 趣闻轶事 | 祝福的话 | 短信大全
© 2023 QicaiSpace.Com