第一次用响应式网页设计布局，拿着本书就开始学了。
- 先来点图
320*480 320*480横屏 768*1024
好吧，设备尺寸不同，贴图不是什么好主意，这些图截的是原图，放这里经过压缩了，不然图就太大了。
- 你需要一个模拟工具
用的是火狐浏览器，下载了个User Agent Switcher 插件，就可以模拟移动设备进行测试。
可以选择尺寸或者自定义来测试，还可以滑动和放缩，截屏。
- 制作步骤
- 先制作一个固定像素的HTML，姑且将body设置为960px据说这样进行设计会有较好的视觉体验。
- 将固定像素转换为百分比，可以将body设置为96%，并以这个为基准进行百分比的转换，公式为：百分比的宽度=目标元素宽度/上下文元素宽度。
<body>
<form id="login_form" />
<div id="form_div">
<h2 >登录</h2>
<input type="text" id="user" placeholder="账号" size="30px" />
<input type="text" id="pwd" placeholder="密码" size="30px" />
<input type="button" id="login" value="登录" />
<input type="button" id="forget" value="忘记密码" />
</div>
</form>
</body>那么#login_form 的百分比宽度就是自身宽度除以body的宽度，如下：
#login_form{ width:31.25%; background:#06C; margin: 0 auto;min-width:200px;max-width:300px;}/* 300/960*/
所有HTML中的距离属性都转换完成后，就可以先运行看看。运行时会出现这样的问题，当设备视口小时会被压扁，当设备视口非常大时又会被拉伸变形，如上css代码中设置了min-width和max-width以限制登录窗口被放大和缩小的尺寸，这样就可以正常显示了。
- 文字大小也需要转换，浏览器默认body字体为16px,需要根据上述公式转换单位为em。
h2{ margin-top:16.66666667%; text-align:center; color:#CCC; font-size:1.5em;} /*16.66666667%=50/300 1.5=24/16 */
这样应该就可以正常运行了。
扫一扫
363
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
