手机和平板电脑的响应式布局 [英] Responsive Layout for mobile phone and tablet pcs

问题描述

我正在用HTML，CSS3 + Javascript和jQuery建立一个网站，

我想把这个布局作为响应式布局。任何人都知道如何使用媒体查询，告诉我有关屏幕范围的多个设备

如果我们只使用宽度来应用这样的样式

@media only screen和（最小宽度：310px）和（最大宽度：479像素）{}

比我们在此使用方向（横向和纵向）的原因，


和最后一个问题是内容不可读，所以内容很小，建议我使用font-size的最佳单位：即pt，px，em aor％

I am building a website in HTML, CSS3 + Javascript and jQuery,
I want to make this layout as responsive layout. Any one having idea how to use media queries, inform me about multiple devices with screen ranges
And if we are using just width for applying styles like this
@media only screen and (min-width:310px) and (max-width:479px) { }
than why we use Orientation (landscape & portrait) in this,

and last problem is this that contents are not readable, so small contents, suggest me best unit for font-size: i.e. pt, px, em aor %

推荐答案

如果你想让你的布局响应，我建议你不要通过滚动你自己的版本开始。有很多框架已经做到了这一点 - 我建议使用其中一个，因为它们往往经过了很好的测试，拥有极大的用户群，以确保工作正常。一个流行的是 Twitter Bootstrap [ ^ ]。

If you want to make your layout responsive, I'd recommend that you didn't start off by rolling your own version. There are numerous "frameworks" out there that already do this - I would recommend using one of those as they tend to be very well tested and have an extremely large user base to make sure that things work OK. A popular one is Twitter Bootstrap[^].

这篇关于手机和平板电脑的响应式布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！