第134天：移动web开发的一些总结（二）
1、响应式布局 开发一个页面，在所有的设备上都能够完美展示。 媒体查询： @media screen and (max-width:100px) { } 媒体类型：screen（屏幕） print （打印机） handheld （手持设备） all （通用） 常用媒体查询参数： width —— 视口宽高 height —— 视口宽高 device-width —— 设备的宽高 device- height —— 设备的宽高 orientation ：检查设备处于横向（landscape）还是竖屏（portrait） 2、响应式设计设计点 设计点一：百分比布局 仅仅使用媒体查询来适应不同固定宽度设计，只会从一组css到另一组css的切换。两种设计之间没有任何平滑渐变。只使用媒体查询，布局有时会变得不可控制。 当然，这只是建议，也有一些页面采用固定布局的情况下能够很好的在一些没有考虑过媒体查询情况下的设备上很好的展示。 设计点二：弹性图片 思路：无论何时，全都包在图片的元素宽度范围内，以最大的宽度同比完整的显示图片。 img{ max-height: 100% } 设计点三：重新布局，显示与隐藏 当页面达到手机屏幕宽度的时候，很多时候就要放弃一些传统的页面设计思想。力求页面简单，做如下处理： ① 同比例缩减元素尺寸 ② 调整页面结构布局 ③ 隐藏冗余的元素 经常需要切换位置元素使用