了解响应式布局这一概念是波纹实习期间,公司做互联网金融微信支付,在跟客户介绍产品的时候经常需要用到手机访问公司主页,用户使用手机访问时要有良好度体验就需要网站同时兼容pc端和移动端.众所周知,市场上有各种型号的手机,大小各异,一个网站要做不同尺寸的多个版本不太现实。使用自适应布局,一个网站兼容多个屏幕尺寸是很好的解决方案,也是未来web设计的趋势.
1.响应式web网站示例
http://mediaqueri.es/, 这个网站上有很好例子,我们随便打开一个,调整浏览器宽度,可以看到网页随浏览器宽度变化自适应改变布局.
2.chrome调试功能的使用
- 右键”审查元素”
- 点击手机图标
- 选择不同尺寸屏幕
不论是查看别人的网站结构,还是我们自己在开放中做测试,chrome的调试功能都非常方便.