响应式网页设计技巧、最佳实践和动态图像缩放技术 [英] Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques

问题描述

我希望这个问题不会因为主题过于宽泛而最终被关闭，但我想知道响应式/自适应网页设计，即一个网站适用于所有浏览器、所有设备.

就结构和布局而言，实施此类网站的最佳方法是什么?

我一直在努力阅读它，因为移动网站现在很重要，而且会持续一段时间，但我找不到提示和指南列表，我想如果这样的资源可用在这里，那么我们都可以受益.

让我感兴趣的另一件事是动态图像缩放是如何完成的?

最让我困惑的是，我猜测布局可能是使用百分比而不是像素值来完成的，因为像素会因设备而异，但图像可能是实现一个网站的关键因素一切.

我期待阅读人们的意见和答案，即使它只是我在网上找不到的教程链接.

解决方案

1.一个网站所有浏览器.

正如@Tak 提到的，这里的答案是渐进增强"和优雅降级".然而，他给出的定义并不完全正确.以下是正确的:

'渐进式增强'(

在桌面和移动屏幕上为 #site-banner 元素指定布局的媒体查询示例如下:

/* 桌面支持 */#site-banner { 宽度:1000px;背景:#fff;边距:0px 自动；高度:120px；}/* 平板电脑支持 - 规则适用于低于 1000 像素的宽度 */@media all and (max-width: 1000px) {#site-banner { 宽度:700px;}}/* PHABLET &移动支持 - 规则适用于低于 700 像素的宽度 */@media all and (max-width: 700px) {#site-banner { 宽度:480px;高度:自动；}}/* 移动支持 - 规则适用于低于 480 像素的宽度 */@media all and (max-width: 480px) {#site-banner { 宽度:自动；高度:自动；}}

3.动态图像缩放是如何完成的?

移动设备为您完成了很多工作，因此通常您只需要了解它的工作原理.基本上，当第一个移动浏览器问世时，他们必须确保已经存在的适用于桌面浏览器的网站也适用于移动设备(否则没有人会使用他们的智能手机浏览网页)，因此他们必须提出检测网站宽度并将其调整为可用的屏幕分辨率的巧妙方法.

例如我的网站 'www.desalasworks.com' 被编码为 900px 宽度，但它工作正常在 320 像素的小屏幕上缩小(页面上的图像会自动重新采样使用多种方法 - 例如 最近邻采样 和 双三次插值，并且尽可能用原生字体替换字体).就图像采样而言，如果您曾经在智能手机上捏过照片以放大"和缩小"，那么您就知道我在说什么.

你通常不需要担心 CSS 来让你的图像正确地重新采样，我注意到有时它们在使用百分比宽度时有点有趣，所以如果是这种情况，请坚持使用像素，以便浏览器更容易判断在哪里项是相互关联的.请注意，您可以专门检测移动浏览器并将您网站的宽度设置为 320 像素，并且其中的所有内容都会相应地对齐，但实际上这并不是在移动设备上拥有一个工作网站所必需的，这样做会迫使您维护 2 个网站，一个移动网站和一个桌面网站(有些公司很乐意这样做).

4.百分比/固定宽度.

就我个人而言，我倾向于使用以屏幕为中心的固定宽度(使用 CSS margin: 0px auto)，我很久没有使用百分比宽度了，主要是因为标准化布局有点像一场噩梦.如果您确实使用百分比宽度，则基本上必须进行更多测试，因此我倾向于远离它们.

请记住，这只是我的意见，一些响应式网络"大师会以百分比宽度发誓几乎所有东西，我只是不赞成牺牲布局的可预测性以获得我认为的边际收益.但后来我有构建桌面网络应用程序的背景，如果我只专注于移动网络(其中水平空间非常宝贵，布局往往更简单)，我可能会有不同的想法.

I hope this question doesn't end up being closed for being too broad a subject but I was wondering about Responsive/Adaptive Web Design, i.e. one website for all browsers, all devices.

What is the best way to implement such a site when it comes to structure and layout?

I've being trying to read up on it since mobile websites are the big thing right now and will be for a while but I can't find a list of tips and guidelines and I figured that if such a resource was available here on SO then we could all benefit.

Another thing that gets me is how is dynamic image scaling done?

Out of everything this is the thing that puzzles me most because layouts I'm guessing are probably done using percentages rather than pixel values because pixels will vary from one device to another but images are probably the key factor in achieving one website for everything.

I'm looking forward to reading people's opinions and answers, even if it is just links to tutorials on the web that I haven't found.

解决方案

1. One website all browsers.

As @Tak mentioned the answers here is 'Progressive Enhancement' and 'Graceful degradation'. However the definitions he gave are not quite right. Here are the proper ones:

'Progressive enhacement' (see link) means that you code for the old browser first (IE6/7 with/without JavaScript is a good starting point) using tried-and-tested technologies such as HTML4 and CSS1, then add enhacement as you progress through testing on more modern browsers down to Chome and Safari on mobile devices which support CSS3 and most of HTML5. This way, you aim to provide any browser with the best possible combination of features supported in it (its never going to be perfect by the way so bear in mind the 80/20 rule to avoid running project into the ground).

'Graceful degradation' (see link) is kinda the same thing but backwards, its a more lazy way of doing it. You start building your site against a modern browser and then apply 'patches' and 'fixes' until its acceptable on older browsers. This ends up creating a lot more work than planning it properly from the start and what generally tends to happen with this approach is that the developer/stakeholder will give up at some point (ie. what the hell? its too much work to get this working in IE6/7 - I'll just de-scope them)

2. Best way to standardise the layout

Personally, my suggestion is that if you want a standard layout across mobile and desktop devices I suggest you use a combination of BIG fonts (so they are visible in a tiny mobile screen) and small ones (so people that have a Desktop browser can read all the detail) on a Desktop-size 900-1000px width.

This site is an example:

http://www.valuetrader.net

When I open it in my Desktop browser I see a lot of detail, but when I'm on the go and use my Smartphone all the critical information (ie should I BUY or SELL a share?) is displayed on a very big font that appears legible in my tiny screen.

UPDATE 2014

This part of the question has now effectively changed to 'Whats the best way to implement the layout?'.

At the moment (and for the last few years of widely available CSS3 support) the standard approach for cross-device layout design is to use a so called 'Responsive' layout based on media queries. There are many CSS frameworks available to get users started with mobile-friendly layouts.

The basic principle for 'Responsive' design is that scrolling on mobiles devices makes vertical space virtually endless so you are only limited by horizontal space. Thus you have to ensure that as the screen gets smaller you let the page flow to fill up all the available horizontal space, and any navigation bars or horizontal elements are folded over vertically so that items are stacked on top of each other rather than using space horizontally.

The standard way to test a site's 'responsiveness' is by dragging the side of your browser window to reduce available width.

The better way is using Developer Tools, for example Chrome has a button to toggle device mode, here is an example using Stackoverflow:

An example of a media query to specify a layout for the #site-banner element on desktop and mobile screens would be as follows:

/* DESKTOP SUPPORT */
#site-banner { width: 1000px; background: #fff; margin: 0px auto; height: 120px; }

/* TABLET SUPPORT - rules apply below 1000px width */
@media all and (max-width: 1000px) {
    #site-banner { width: 700px; }
}

/* PHABLET & MOBILE SUPPORT - rules apply below 700px width */
@media all and (max-width: 700px) {
    #site-banner { width: 480px; height: auto; }
}

/* MOBILE SUPPORT - rules apply below 480px width */
@media all and (max-width: 480px) {
    #site-banner { width: auto; height: auto;}
}

3. How is dynamic image scaling done?

The mobile device does a lot of this for you so generally you just need an understanding of how it works. Basically, when the first mobile browsers came out they had to make sure that the sites that were already out there working for desktop browsers worked on a mobile too (otherwise nobody would use their smartphone to browse the web) so they had to come up with clever ways to detect the width of the site and resize it to the screen resolution that they had available.

For example my site 'www.desalasworks.com' is coded to 900px width, but it works fine by getting down-scaled on a small 320px screen (images on the page are automatically resampled using a variety of methods - such as nearest-neighbour sampling and bicubic interpolation, and the fonts replaced with native fonts wherever possible). As far as the image sampling goes, if you have ever pinched a photo on your smartphone to 'zoom in' and 'zoom out' you know what I'm talking about.

You generally dont need to worry about CSS to get your images to resample properly, I noticed that sometimes they are a bit funny when using percentage widths so stick to pixels if thats the case to make it easier for the browser to tell where items are in relation to one another. Note that you CAN specifically detect the mobile browser and set the width of your site to 320px and everything in it to fall in-line accordingly but in reality this is not necessary to have a working site on a mobile device and doing this will force you to maintain 2 sites, a mobile site and a desktop site (which some companies are happy to do).

4. Percentages / fixed width.

Personally I tend to use fixed width centered on a screen (using CSS margin: 0px auto), I haven't used percentage widths for a LONG time, mostly because its a bit of a nightmare to standardise the layout. If you do use percentage widths you'll basically have to do a lot more testing so I would tend to veer away from them.

Bear in mind this is just my opinion, some 'reponsive web' gurus will swear by percentage widths on just about everything, I'm just not sold on the idea of sacrificing predictability of the layout for what I see as marginal benefit. But then I come from a background of building desktop webapps, I'd probably think differently if I was just focused on mobile web (where horizontal space is at a premium and layouts tend to be simpler).

这篇关于响应式网页设计技巧、最佳实践和动态图像缩放技术的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！