一个web app为了适应不同设备的屏幕是不是需要不同的css文件

Question

一个应用类的web app(基本上以表格,输入框,按键为主), 打算针对iOS和Android设备, 那么为了适应不同屏幕尺寸是不是每个都要有一个css文件, 然后在网页中判断屏幕尺寸来加载不同的css?

本人刚接触css,纯菜鸟一个,
现在宽度不是大问题, 高度却总是搞不定, 尤其是不同屏幕按键的height和上面的字体也需要放大或缩小, 不知道大家有什么别的简单一点的解决方法吗?

Answer 1

不需要多个CSS文件。
多CSS文件对于同时适应PC和Mobile的复杂APP或许有用，只是适应iOS和Android的话，完全没必要，@media 就可以搞定了！

高度却总是搞不定, 不同屏幕按键的height和上面的字体也需要放大或缩小

其实只要区分Phone和Pad就可以了，对于不同尺寸的安卓手机来控制按键高度感觉意义不大，如果非要这样做的话，@media 也是最佳方案。

Answer 2

响应式设计（Responsive Design）不需要多个CSS文件

推荐给你一个排版的教程吧：
http://zh.learnlayout.com/media-queries.html

Answer 3

百分比布局

Answer 4

去了解下响应式布局吧，推荐个bootcss.com 这个是 bootstrap中文教程。