手机Web开发学习(三)

响应式Web,也称之为自适应Web;
当然就是可以根据客户端浏览设备的屏幕分辨率,自动调整排版的Web页面;

做了个简单的页面:
测试地址(请使用移动设备测试) http://www.54575.com/mobile/flexwrap/index.html

本人HTC G7手机截图(竖屏+横屏):

为了看的清晰,用Opera Mobile Emulator模拟3种不同显示设备的截图:

宽度240px:
隐藏Left,Middle容器宽度100%,Right容器宽度100%;

宽度480px:
隐藏Left;Middle容器宽度75%,Right容器宽度25%;

宽度800px:
Left容器宽度25%,Middle容器宽度50%,Right容器宽度50%;

如何实现,就是靠的这段代码:

/* for 320 px width screen */
@media only screen and (max-device-width:320px){
#left{width: 100%; display:none;}
#main{width: 100%; display: block;}
#right{width: 100%; display: block;}
}
/* for 480px width screen */
@media only screen and (min-device-width:321px) and (max-device-width:480px){
#left{ display:none;}
#main{width: 75%; display: block;}
#right{width: 25%; display: block;}
}
/* for 800 px width screen */
@media only screen and (min-device-width:481px){
#left{width: 25%; display:block;}
#main{width: 50%; display: block;}
#right{width: 25%; display: block;}
}

简单实现了一个自适应Web页面的设计;
一个如此简单的页面,就必须为各种分辨率定义1种css,个人认为这就是产品经理设计出来,作为给前端码农穿小鞋的一项技术,坑爹哪~

虽然有着非常好的用户浏览的体验,但在冗余代码和敏捷开发上,自适应的Web页面给开发者一击重重的锤子;
我不希望看到未来移动终端的Web开发会变的如此糟糕,但无论怎样,先学着吧……

    • 如果手机能上网,就用手机看咯,但这样不方便,推荐用Safari模拟iPhone客户端,或者安装一个Opera Mobile Emulator