设计自适应不同屏幕大小的网页(1)

最近在做手机版网页，碰到了挺多的问题，不同屏幕大小不一样，分辨率不一样，都会导致最终网页显示的结果不一样，这里记录下网上搜索到的解决方法。

先来几个科普的博客，这些博客主要讲述了移动端网页设计上的需要知道的几点知识。

1、这篇博客的重点主要是介绍viewport的使用，还有参数的使用，博客中提及的target- densitydpi现在基本上已经废弃了，用iphone测试过基本已不支持target- densitydpi，但是个别安卓手机还是支持的，不知道是不是安卓版本较低的关系。博客地址

2、使用百分比法设计自适应网站

• 不使用绝对宽度：使用百分比指定宽度或者auto
• 使用相对大小的字体：使用百分比或者em
• 图片自适应： img { max-width: 100%;} 或者 img { width: 100%;}
• 流动布局：同一行显示多个元素时，尽量使用流动布局

使用这样的方式有很多局限性

• 图片失真，当图片成为背景图片时无法覆盖整个屏幕或者超出屏幕等问题
• 无法定义随着屏幕而变化的高度（有背景图片时可以通过js计算图片的缩放比动态定义，但是没有背景图片时就变得很麻烦了）
• 虽然使用的是相对大小字体，但是屏幕越大字体就越小，没有随着屏幕的变化而放大或缩小。

上面这种方式适用于布局简单的页面，没有背景图片，不需要在指定位置显示指定元素等要求的网页。如果只是设计手机端页面这种方式就足够了，因为手机屏幕大小相差不大，显示区别也不太大。

3、使用媒体查询(CSS3 Media Queries)设计自适应网站

• Responsive+media： 通过设定不同屏幕大小加载不同的css来实现网页自适应。
• 使用方法：博客地址
• 例子：mediaqueri.es：这些例子都很好的兼顾到了浏览器兼容性等问题，很值得看看的。

使用这种方式的好处有很多

• 可以加载不同尺寸的图片
• 可以根据不同屏幕大小设计不同的显示方式。
• 可以根据不同屏幕设定字体大小等

当然这种方式也有它的局限性，可能也会出现使用百分比法设计网站出现的缺点。适用于要求pc端网页与手机端网页显示内容一致的网页。（PS：看过文档感觉这个对网页设计整个布局要求挺高的，这样的网页设计出来也是高大上啊）

上面讲的两种设计自适应网页都有各自的优缺点，这两种方法也可以结合使用，在图片和字体大小方面可以使用媒体查询方式，其他则可使用百分比方式。

以上就是我这几天用上述两种方式的体会，可能写的不是很全面或者有些地方不是很对，希望大家可以指正或者分享更好的方法。这两种方式用的还不是很熟，如果用的多了肯定还会发现更多的问题，后期还会继续分享使用这两种方式的体会。