如何实施响应式网页设计及其最佳实践 [英] 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.
- 将现有网站转换为包含响应式设计的风险是什么.
- 是否有任何框架可以做到这一点，哪个是最好的
- 如何跨设备和浏览器支持它
推荐答案
使用媒体查询将适应不同的不同屏幕尺寸的css.它的工作方式是告诉浏览器:如果 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屋！
