In the previous mobile user experience design article, we talked about mobile user experience and how to design mobile Web pages at the demand level.
Next we will discuss the implementation method of the technology. The first method is responsive web page design.
What is responsive webpage design?
Responsive web design is a concept proposed by Ethan Marcotte in last May. In short, a website can be compatible with multiple terminals, adjust the layout and content of the display based on the screen size or type of the terminal-instead of making a specific version for each terminal.
Lists the different types of hardware devices, operating systems, and screen resolutions that we may face:
The application response web design eliminates the need to write separate web pages for specific devices or screens, and does not need to create separate web sites. One page is applicable to all devices,In this example, the layout and content of a Web page are hidden on different devices:
Web page displayed in PC:
On a mobile device with a small screen, it becomes like this. There is only the theme content on the page, and the side bar and advertisement are missing:
How to implement it?
Three steps need to be integrated:
Step 1: Media query-that isSpecify different CSS display styles
Step 2: fluid grid-use percentage % in CSS instead of absolute value, such as pixel Px to modify the size of page layout elements, such as Div.
Step 3: fluid images/media-the same percentage % instead of the absolute value is used to modify the display of images, videos, and fonts so that they can be adjusted based on different screens.
First, add the following content to the page:
<Meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1">
The following initial-scale indicates the initial scale, maximum-scale indicates the maximum scale, and 1 indicates that the scale cannot be performed.
The following two methods allow the browser to select different CSS styles Based on the screen size:
Method 1:
Add the @ media tag to the CSS file, as shown in figure
@ Media screen and (min-width: 481px)
{
/* Apply the style if the width is greater than 481 */
......
}
@ Media screen and (max-width: 480px)
{
/* Apply the style when the width is less than 480 */
......
}
Other common CSS attributes are placed outside.
Method 2:
Specify different css in the
<Head>
<Title> </title>
<Link href = "test1.css" rel = "stylesheet" type = "text/CSS"/>
<Link href = "mobile.css" rel = "stylesheet" Media = "screen and (max-width: 768px)" type = "text/CSS"/>
</Head>
When the browser width is less than px, mobile.css will be used, otherwise the previous one will be used.
Description
The second step should note that the percentage is relative to the parent container.
Step 3: You can use
IMG, object {
Max-width: 100%;
}
This ensures that the size of the image and media does not exceed the screen size.
You can use EM, 1em = 100% for fonts.
Another method is available.New methods of flex box and css3 will be introduced later.
Advantages and disadvantages of responsive Web Design
Advantages:
The workload is relatively small for developing mobile websites separately, and no other domain names are required. This is applicable to all devices.
Disadvantages:
Bandwidth usage: for mobile devices with insufficient CPU and resources, many unwanted images and other resources are downloaded, and images are not optimized for small screens.
We can useMobile priority Design MethodAnd technical skills to overcome. The next article will introduce some design tools.
This article copyright belongs to the original author, reproduced must indicate the source: http://www.cnblogs.com/h5rocks,Otherwise, you are entitled to pursue legal liability.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
