Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "web responsive web design and application analysis". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Responsive Web design (Responsive Web design), the idea is that the design and development should be automatically adjusted according to the screen size, the behavior of the users of the platform and the environment; it should have a flexible grid and layout, images and CSS can be intelligently combined. For example, when a user switches from a computer to ipad, the website can automatically switch to accommodate resolution, image size and script. In other words, the site should be able to automatically adjust according to the user's environment, which can reduce unnecessary repetitive design.

The concept of responsive Web Design

Ethan Marcotte once published an article "Responsive Web Design" in A List Apart, in which he quoted the concept of responsive architectural design:

The so-called responsive architectural design is that designers try to build a house that uses some sensors to detect the surrounding environment, such as temperature, humidity, light and so on. Now we extend this idea to the field of WEB design. We can think, why should we create a design for each user group? We are so stupid. Is there a smarter way to do it? Like responsive architectural design, web design should be intelligently adjusted.

Obviously, web designs cannot use sensors, which requires more abstract thinking. Fortunately, some concepts have been put into practice, such as liquid layout, media queries to help reformat pages, and scripts. But responsive Web design is not just about adaptive screen resolution and automatically zooming pictures and so on, it is more like a new way of thinking about design.

Adjust the resolution

Different devices have their own screen resolution, clarity and screen orientation, and a variety of new devices that are being developed will also have new screen sizes. Some devices are based on horizontal screen (portrait), some are vertical screen (landscape), and even square; for the increasingly popular iPhone, iPad and other smartphones and tablets, users can also switch the orientation of the screen by turning the device. How can one design satisfy all situations?

To be compatible with both horizontal and vertical screens (it is also possible for users to switch directions during page loading), we must consider N screen sizes. We can divide these specifications into several broad categories and then make a scheme for each category to ensure that the scheme is as flexible as possible at least in this group. But even so, the result will be very uncomfortable. Who knows what the share of certain devices will be in five years' time? And many users don't even maximize the browser window; Oh, my God, I can't stand it anymore.

Morten Hjerde and his buddies counted more than 400 mobile devices in the market from 2005 to 2008 (see the report). The following picture shows the approximate results:

After 2008, more and more representative new devices were introduced and popularized. Obviously, we cannot continue to follow the "multi-plan" thinking; so what should we do?

Part of the solution: everything flexible

A few years ago, flexible layout (flexible layout) was almost a luxury, and the so-called flexibility was only reflected in vertical layout and font size; the size of the picture could not be changed, which caused the picture to damage the page structure, and even if it was elastic, in many cases it would be a mess. So, the so-called flexible layout is not that flexible, and sometimes it can't even adapt to the difference in screen resolution between desktops and laptops, let alone mobile devices such as mobile phones.

Now, we can make the page more "flexible" through responsive design and development ideas. The size of the picture can be adjusted automatically, and the layout of the page will not be destroyed. Although there is never the most perfect solution, it gives us more choices. Whether users switch the screen orientation of the device or move from the desktop screen to the iPad for browsing, the page will be truly flexible.

In the Ethan Marcotte article mentioned earlier, he uses an example to demonstrate the page elasticity features of responsive Web design:

The implementation of this example is a perfect combination of liquid grid and liquid image technology, and cleverly uses the right HTML tag in the right place. "liquid grid" is a very common way of implementation; for "liquid image" technology, the following article makes a good introduction:

Hiding and Revealing Portions of Images

Creating Sliding Composite Images

Foreground Images That Scale With the Layout

When it comes to creating liquid pages, it's best to take a look at Zoe Mickley Gillenwater's Flexible Web Design: Creating Liquid and Elastic Layouts with CSS, how to create Elastic Images. In addition, Zoe's article "Essential Resources for Creating Liquid and Elastic Layouts." Provides a number of tutorials, resources, creative guidance, and implementation on creating elastic grids and layouts.

Technically, it all sounds simple, but it's really complicated. For example, take a closer look at the logo picture in the example provided by Ethan Marcotte:

If we keep reducing the browser window, we will find that the text part of the logo image will always remain smaller than the same period last year to ensure that it is fully readable and will not be cut off on both sides like the surrounding illustrations. So the whole logo actually consists of two parts: the illustration, as the background image of the page title, will be kept in size, but will be trimmed with the layout adjustment; and the text part is a separate image.

Among them, the element uses the illustration as the background, and the picture of the text part is always aligned with the background.

This example shows the idea of responsive Web design. However, this small effort is not enough to prevent the entire layout from becoming too narrow or too short in small windows, and the logo text will eventually become too small to recognize, and the background image will be overcut.

Elastic picture

In the idea of responsive Web design, an important factor is how to deal with the problem of pictures. There are many techniques for zooming pictures over the same period, many of which are simple and easy. Among them, one of the first attempts by Richard Rutter is more popular, even using the max-width property of CSS. This method is also mentioned in Ethan Marcotte's liquid Images.

Img {max-width: 100%;}

As long as no other style code involving the width of the picture overrides this line of rules, all images on the page will be loaded at their original width, unless the width of the visual portion of other devices is less than the original width of the picture. The above code ensures that the maximum width of the image does not exceed the width of the browser window or the visible part of its container, so when the visual part of the window or container begins to narrow, the maximum width of the image decreases accordingly. the picture itself will never be hidden and covered at the edge of the container. In fact, as Jason Grigsby mentioned in his CSS Media Query for Mobile is Fool's Gold article, "the idea behind a liquid picture is to make sure that the picture is fully displayed at the maximum width at all times within its original width. We don't have to set the width and height for the picture in the stylesheet, we just need to have the stylesheet assist the browser to zoom the picture when the window size changes." A simple and beautiful way.

The resolution and loading time of the image itself is another issue to consider. Although through the above method, you can easily zoom the picture to ensure that it can be fully browsed in the window of the mobile device, but if the original picture itself is too large, it will significantly reduce the download speed of the picture file. Unnecessary consumption of storage space.

Responsive picture

The idea of "responsive picture" technology put forward by Filament Group helps solve the problem mentioned above: not only to zoom the picture year-on-year, but also to reduce the resolution of the picture itself on small devices. You can take a look at the demo page.

The implementation of this technology requires the use of several related files, which we can get on Github. Includes a JavaScript file (rwd-images.js), an .htaccess file, and some sample resource files. For specific usage, please refer to the documentation of Responsive Images. The general principle is that rwd-images.js detects the screen resolution of the current device, and if it is a large-screen device, adds a BASE tag to the head section of the page and directs subsequent requests for images, scripts, and stylesheets to a virtual path "/ rwd-router". When these requests arrive at the server, the .htacces file determines whether the requests require original images or small "responsive images" and outputs feedback accordingly. For mobile devices with small screens, large pictures of the original size will never be used.

Date-fullsrc is a property of the definition file in html5. If the width of the screen exceeds the 480px, the larger resolution picture (largeRes.jpg) will be loaded, and the smaller screen resolution will load the smaller picture (smallRes.jpg).

Insert a basic element into the JS file that allows the page to redirect images so that when the page loads, only images that fit the screen resolution are loaded, while other images are not downloaded. Especially for websites with a large number of pictures, this technology can save a lot of bandwidth and loading time.

The technology supports most modern browsers, including IE8+, Safari, Chrome and Opera, as well as mobile device versions of these browsers; in FireFox and some older browsers, it is gracefully downgraded: we can still get the output of small pictures, but at the same time, the original large images will also be downloaded.

Disable automatic picture zooming in iPhone

In iPhone and iPod Touch, the page is automatically scaled down to the most suitable screen size, the x-axis does not generate a scroll bar, and users can drag up and down to browse the entire page, or zoom in on parts of the page as needed. There is a problem here, even if we use the idea of responsive Web design to output small pictures specifically for the small screen of iPhone, it will also be scaled down at the same scale as the whole page, as shown on the left side of the following figure.

We can use some of Apple's proprietary meta tags to solve similar problems. Add the following code to the section of the page (for more information, please refer to the related article of Think Vitamin):

Set the value of initial-scale to "1" to override the default zoom mode, maintaining the original size and proportion. For more information on the use of viewport meta tags, please refer to Apple's official documentation.

Create a layout structure

When the screen size of different devices that the page needs to adapt to is too different, in addition to the picture, we should also consider the intelligent adjustment of the entire layout structure; we can use separate stylesheets, or more effectively, use CSS media query. This will not cause much trouble, most style settings will not be affected and changed, only some specific elements will change position through floating, width and height settings.

We can use a default main stylesheet to define the main structural elements of the page, such as the default layout of # wrapper, # content, # sidebar, # nav, etc., as well as some global color and font schemes.

We can monitor how page layouts change with different browsing environments, and if they become too narrow, too short or too wide, we inherit the settings of the main stylesheet through a child stylesheet. and style overrides specifically for certain layout structures. Let's take a look at the code example:

The following code can be placed in the default main style sheet style.css:

/ * Default styles that will carry to the child style sheet * / html,body {background... Font... Color... } h1content h2jinh3 {} p, blockquote, pre, code, ol, ul {} / * Structural elements * / # wrapper {width: 80%; margin: 0 auto; background: # fff; padding: 20px;} # content {width: 54%; float: left; margin-right: 3%;} # sidebar-left {width: 20%; float: left; margin-right: 3% } # sidebar-right {width: 20%; float: left;} the following code can be placed in the child stylesheet mobile.css for style overwriting for mobile devices: # wrapper {width: 90%;} # content {width: 100%;} # sidebar-left {width: 100%; clear: both / * Additional styling for our new layout * / border-top: 1px solid # ccc; margin-top: 20px;} # sidebar-right {width: 100%; clear: both; / * Additional styling for our new layout * / border-top: 1px solid # ccc; margin-top: 20px;}

The general visual effect is as follows:

Media Queries

CSS3 supports all media types supported by CSS2.1, such as screen, print, handheld, etc., while adding a number of functional properties related to media types, including max-width (maximum width), device-width (device width), orientation (screen orientation, landscape or vertical), and color. New toys that emerge after the release of CSS3, such as iPad or Android-related devices, can perfectly support these attributes. So we can use media query to set unique styles for new devices while ignoring old browsers on desktops that don't support CSS3.

In Ethan's article, we can see an example of media query usage:

The code itself is a good illustration of how it works: if the page is rendered on a screen (not printed) and the screen width does not exceed 480px, the shetland.css stylesheet is loaded. For more information about the new properties of CSS3 media, refer to the article "The Orientation Media Query".

We can create multiple stylesheets to accommodate the width range of different device types. The "Meet the media query" section of Ethan's article has more examples and explanations. It is more efficient to consolidate multiple media queries into one stylesheet file:

/ * Smartphones (portrait and landscape)-* / @ media only screen and (min-device-width: 320px) and (max-device-width: 480px) {/ * Styles * /} / * Smartphones (landscape)-* / @ media only screen and (min-width: 321px) {/ * Styles * /} / * Smartphones (portrait)- -- * / @ media only screen and (max-width: 320px) {/ * Styles * /}

The above code comes from a free template created by Andy Clark that is compatible with a variety of mainstream devices. For the difference and relationship between the way you integrate multiple media queries into one stylesheet file and the way you call different stylesheets through media queries, you can refer to the article "Hardboiled CSS3 Media Queries".

CSS3 Media Queries

Some of the code examples demonstrated above are both CSS2.1 and CSS3. Now let's look at how to use CSS3's proprietary media queries functionality to create a responsive Web design. Some of these methods are of practical value at present and will certainly come in handy in the near future.

The two attributes min-width and max-width are very reliable. With the min-width setting, we can specify a specific stylesheet for the page if the browser window or device screen width is higher than this value; max-width is vice versa.

In the following examples, we use the syntax of integrating multiple media queries into a single stylesheet for coding. As mentioned earlier, this is more efficient and reduces the number of requests.

@ media screen and (min-width: 600px) {.hereIsMyClass {width: 30%; float: right;}}

The class (hereIsMyClass) defined in the above code is valid only if the browser or screen width exceeds the 600px.

@ media screen and (max-width: 600px) {.aClassfor SmallScreens {clear: both; font-size: 1.3em;}}

This code does the opposite: the aClassforSmallScreens class is valid only if the browser or screen width is less than 600px.

You can see that min-width and max-width can determine both the screen size of the device and the actual width of the browser. Sometimes we want to work on a particular device through media queries, ignoring whether the browser running on it is inconsistent with the device screen size because it is not maximized. At this point, we need to use min-device-width and max-device-width to determine the screen size of the device itself.

@ media screen and (max-device-width: 480px) {.classForiPhoneDisplay {font-size: 1.2em;}} @ media screen and (min-device-width: 768px) {.minimumiPadWidth {clear: both; margin-bottom: 2px solid # ccc;}}

There are other ways to effectively use media queries to lock down certain specified devices. Refer to the following two articles from Thomas Maier:

CSS for iPhone 4 (Retina display)

How To: CSS for the iPad

The orientation attribute is particularly useful for iPad. Its value can be landscape (landscape screen) or portrait (vertical screen).

@ media screen and (orientation: landscape) {.iPadLandscape {width: 30%; float: right;}} @ media screen and (orientation: portrait) {.iPadPortrait {clear: both;}}

Unfortunately, this attribute is currently only valid on iPad. For other devices that can be transferred to the screen, such as the iPhone, you can use min-device-width and max-device-width to work around the implementation; for more information, please refer to the article "Determine iPhone orientation using CSS".

We can also use a combination of the above attributes to lock a screen size range:

@ media screen and (min-width: 800px) and (max-width: 1200px) {.classForaMediumScreen {background: # cc0000; width: 30%; float: right;}}

The above code works on all devices with browser windows or screen widths between 800px and 1200px.

In fact, many designers and developers still choose to use multiple stylesheets to implement media queries. If from the point of view of the organization and maintenance of resources, the benefits do outweigh the depletion of efficiency, then this is not bad at all:

Therefore, everything is not absolute, it is best to decide the way to use media queries according to the actual situation. For example, for iPad, we can write multiple media queries directly into a stylesheet. Because iPad users may switch screen orientation at any time, in this case, to ensure that the page responds to screen resizing in a very short time, we must choose the most efficient way.

JavaScript

JavaScript is also one of our weapons, especially when some old devices can not fully support CSS3's media query, it can be used as backup. Fortunately, there is already a special JS library to help older browsers (IE 5, firefox, Firefox, Safari 2, etc.) support CSS3's media queries. It's easy to use it. Download css3-mediaqueries.js and call it on your page.

The following code demonstrates how to use a few simple lines of jQuery code to detect the browser width and invoke different stylesheets for different situations:

$(document) .ready (function () {$(window) .bind ("resize", resizeWindow); function resizeWindow (e) {var newWindowWidth = $(window) .width (); / / If width width is below 600px, switch to the mobile stylesheet if (newWindowWidth)

< 600){ $("link[rel=stylesheet]").attr({href : "mobile.css"}); } // Else if width is above 600px, switch to the large stylesheet else if(newWindowWidth >

$("link [rel=stylesheet]") .attr ({href: "style.css"});})

There are many other solutions like this. So let's be clear that media queries is not an absolute only answer, it's just a means to implement responsive Web design ideas in a pure CSS way. With JavaScript, we can achieve more changes. This "Combining Media Queries and JavaScript" article shows us more details about how JavaScript works with media queries.

Show or hide content

Through the previous study, we have learned that for responsive Web design, proportional reduction of element size and adjustment of page structure layout are two important ways. However, for the text content information on the page, we can not simply deal with it from two aspects: "year-on-year reduction" and "adjusting the layout structure". For mobile devices such as mobile phones, there are many best practices and guidelines in terms of text content: simplified navigation, easier to focus content, replacing traditional multi-text content with information lists, and so on.

The idea of responsive Web design is, on the one hand, to ensure that the page elements and layout are flexible enough to be compatible with all kinds of device platforms and screen sizes; on the other hand, to enhance readability and ease of use to help users get the most important content information more easily in any device environment.

There is a style code that we have been using for many years:

Display: none

We can use it in a stylesheet for a certain type of small screen device to hide some block-level elements in the page, or we can use the previous method to judge the current hardware screen specifications through JS, and in the case of a small screen device, we can directly add a tool class class for the elements that need to be hidden. For example, for mobile devices, we can hide large chunks of text content and display only a simple navigation structure in which navigation elements can point to the details page.

Note that do not use the visibility: hidden approach, as this only prevents the element from being visually rendered; the display attribute helps us set whether the entire piece of content needs to be output. For mobile devices, it is important to avoid these unnecessary waste of resources. Let's look at a simple example:

The top half of the picture shows the complete page displayed by the large-screen device, and the following is how the page is rendered on the small-screen device. The HTML code of the page is as follows:

Left Sidebar Content | Right Sidebar Content

Main Content A Left Sidebar A Right Sidebar

Here is the default main stylesheet, where we want to hide the link navigation section (sidebar-nav), because the device screen for which the default style applies will be large enough to display everything, including two sidebars.

# content {width: 54%; float: left; margin-right: 3%;} # sidebar-left {width: 20%; float: left; margin-right: 3%;} # sidebar-right {width: 20%; float: left;}. Sidebar-nav {display: none;}

The following is the stylesheet code for small screen mobile devices. Now, we want to hide the two sidebars and make the sidebar-nav display. With JavaScript, the corresponding sidebar can be restored when the user clicks the link in sidebar-nav. Of course, there are many ways to trigger a restore display, that is, you can change the value of the display property of the sidebar through JS, or you can add additional layout styles to it.

# content {width: 100%;} # sidebar-left {display: none;} # sidebar-right {display: none;}. Sidebar-nav {display: inline;}

Now, our page can respond to the changes in device and screen specifications to achieve year-on-year scaling of elements, changes in layout structure, and optimization and adjustment of content. Especially for mobile devices, we should also pay attention to some common design guidelines for such devices in the process of practice. For example, for mobile devices, use a specific style to change the original text navigation elements of the page into more easy-to-use icons. The following article resources are available for reference:

Mobile Web Design Trends For 2009

7 Usability Guidelines for Websites on Mobile Devices

Touch screen and mouse

Touch screen devices have become mainstream. Although most touch-screen devices are still small-screen products, such as mobile phones, more and more large-screen devices on the market are also using touch-screen technology, not to mention tablets such as iPads, even laptops and desktops. For example, HP Touchsmart tm2t, even with traditional keyboard and mouse devices, also adds touch screen technology.

Compared with the traditional interaction based on mouse pointer, touch screen technology obviously brings a completely different way of interaction and corresponding design specifications; both of them have their own applicable fields. Fortunately, it is not difficult to make our design meet the specifications of these two types of equipment at the same time, but there are some places to pay attention to. For example, a touchscreen device cannot reflect the hover behavior and the corresponding style defined by CSS because it does not have the outline of a mouse pointer, and a finger click is a click behavior. So don't let any function depend on triggering the hover state.

This is the end of the content of "web responsive web design and application analysis". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.