如何实施响应式网页设计及其最佳做法 [英] How to implement responsive web design and its best practices

问题描述

我有一个网站使用像素来呈现网页。但是，当我在不同设备上查看具有不同屏幕分辨率的网站时，整个网页不会适合屏幕，如果我使用百分比，网页内容将会受到挤压。

I have a website which uses pixel to render the pages. But when i view the website in different devices having different screen resolution the whole page will not fit into screen and if i use percentage, the page content will get squeezed.

响应式网页设计是设计网页的最佳选择。

Is the responsive web design is the right choice to design the web page. If so, I have got few concerns.

1. 将现有网站转换为包含回应式设计的风险是什么。


2. 是否有任何框架可以执行此操作，并且是最好的
。

3. 如何在设备和浏览器上支持

推荐答案

使用媒体查询< a>将针对不同的屏幕尺寸调整不同的css。它的工作方式告诉浏览器：if screenwidth = 700px或更小/更大;使用移动css。如果screenwidth = 1000px或更小/更大;使用桌面css。您可以使用多少媒体查询没有限制。

Using media queries will adapt a different css for different screen sizes. The way it works is telling the browser: if screenwidth = 700px or smaller/bigger; use mobile css. If screenwidth = 1000px or smaller/bigger; use desktop css. There's no limit to how many media queries you can use.

使用百分比也是一种可能性; 流体设计。我建议使用这一起媒体查询虽然。

Using percentages is also a possibility; fluid design. I'd suggest using this together with media queries though.

至于框架，有很多。 Bootstrap 是更多的人群之一。我个人认为工作移动第一是最好的方法。但是，关于这个问题仍然有很多争论。

As for frameworks, there are many out there. Bootstrap is one of the more populair ones. I personally believe working mobile first is the best way to go though. However, there is still heated debate on this subject.

正如Pete在前面的评论中提到的;使用优雅降级（桌面优先）将使设备下载与桌面版网站一样多，但不会使用下载的内容。对用户来说，这是一个巨大的缺点。 （更大的页面加载次数，大量的服务器请求，更多的MB数据使用等）因此，为什么我认为渐进增强（移动优先）

As Pete mentioned in a comment earlier; working with graceful degredation (desktop first) will make the device download as much as the desktop site but not make use of the content downloaded. Wich is a huge drawback for the user. (Bigger pageload times, lots of server requests, more use of MB data etc.) Hence why I think progressive enhancement (mobile first) is the way to go.

使用渐进增强功能，浏览器将始终首先下载移动css;

Using progressive enhancement, the browser will always download the mobile css first; cutting down pageload times extremely.

有关响应式设计的浏览器支持信息，请检查此链接。

For browser support info on responsive design, check this link.

这篇关于如何实施响应式网页设计及其最佳做法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！