响应式Web设计提示，最佳实践和动态图像缩放技术 [英] Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques
问题描述
我希望这个问题不会因为过于广泛的主题而结束，但我想知道响应/自适应网页设计，即所有浏览器和所有设备的一个网站。
在结构和布局方面，实现这样一个网站的最好方法是什么？
我试图读一下移动网站是现在的大事，将是一段时间，但我找不到一个提示和指南的列表，我想如果这样的资源在这里可以在SO，那么我们都可以受益。
另一件让我感动的事情是如何进行动态图像缩放？
在这一切之外，布局我猜猜可能是使用百分比而不是像素值，因为像素将不同，从一个设备到另一个，但图像可能是实现一个网站的一切的关键因素。
我期待着阅读人们的意见和答案，即使它只是链接到我没有找到的教程。
1。
正如@Tak所说，这里的答案是渐进增强和平滑降级。然而，他给出的定义是不完全正确的。这是正确的：
'渐进式附加（，例如最近邻样本和双三次插值，以及用原生字体替换的字体可能）。至于图像采样，如果你已经捏在你的智能手机上的照片，以放大和缩小，你知道我在说什么。
你通常不需要担心CSS让你的图片正确地重新取样，我注意到，有时他们有点有趣，当使用百分比宽度，以坚持像素这种情况使得浏览器更容易分辨项目彼此之间的关系。请注意，您可以专门检测移动浏览器，并将您的网站的宽度设置为320像素，并在其中的一切内容相应，但在现实中，这是没有必要在移动设备上有一个工作网站，这样做会迫使你维护2个网站，移动网站和桌面版网站（有些公司很乐意为之）。
4。百分比/固定宽度。
我个人倾向于使用以屏幕为中心的固定宽度（使用CSS边距：0px自动），我没有使用百分比宽度为一长时间，主要是因为它有点噩梦来标准化布局。如果你使用百分比宽度，你基本上需要做更多的测试，所以我会倾向于远离他们。
请记住这只是我的意见，一些'reonsive网络'大师会发怒的百分比宽度对一切，我只是不是卖的想法牺牲布局的可预见性，我认为边际效益。但是，后来我从一个建立桌面web应用程序的背景下，如果我只专注于移动网络（其中横向空间是一个溢价和布局往往更简单），我可能会有不同的想法。
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:
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).
这篇关于响应式Web设计提示，最佳实践和动态图像缩放技术的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
