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

In this issue, the editor will bring you about the adaptive screen CSS responsive layout design skills, the article is rich in content and professional analysis and description for you, I hope you can get something after reading this article.

Responsive design

At present, adaptive design and responsive design are very popular, and they are often confused. Adaptive design should not be confused with adaptive layout. They are completely different concepts.

Let's first explain the similarities and differences between the two:

Since the rapid development of mobile terminals, a variety of models have developed by leaps and bounds, and the solution of many websites is to provide different web pages for different devices, such as a mobile version or an iPhone/iPad version. This ensures effectiveness, but it is troublesome to maintain several versions at the same time, and if a site has multiple portal, it will greatly increase the complexity of the architectural design.

As a result, it has long been wondered whether it is possible to "design at once, universally applicable", so that the same web page can automatically adapt to different screen sizes and automatically adjust the layout (layout) according to the width of the screen.

In 2010, Ethan Marcotte coined the term "adaptive web design" (Responsive Web Design), which refers to a web design that automatically recognizes the screen width and adjusts accordingly.

As shown in the figure, it is called adaptive layout. Adaptive layout has its value in that it can provide a more practical solution, which makes the implementation of the project cheaper and easier to test. An adaptive layout can be seen as a cheaper alternative to responsive layout and will be more attractive when project resources are scarce.

In a responsive layout, you have to consider hundreds of different states:

Responsive web design is a subset of adaptive web design. Responsive web design refers to the layout of the page (mobile grid, flexible images and media queries). The overall goal is to solve the problem of equipment diversification.

Responsive layout is equal to mobile grid layout, while adaptive layout is equal to layout using fixed split points.

When fixed width and flow width are combined, adaptive layout is a responsive design, not just an alternative to it.

Background

PC Internet accelerates migration to mobile

Mobile entry: when users want to complete the operation of the PC page through the mobile phone, the common is the merchant's operation of Weibo, the copy is enough to attract users to click on the link to participate in the activity, if the activity page does not do responsive processing: large page size, many requests, poor experience, poor compatibility, layers of obstacles eventually lead users to give up to participate.

advantage

Low development cost and low threshold

Native APP:Objective-C or Java-High cost of learning

Hybrid APP: shell + Web APP, need to be installed.

Responsive Web APP:HTML5+JS+CSS-low threshold, easy to use, fast iteration

Cross platforms and endpoints and do not need to assign subdomains

Although the user terminal can be judged to jump after monitoring the user UA, it still allocates multiple domains, and the response type does not need to monitor the switching of the user UA without domain, but only needs to adapt different function modules and performance styles according to the terminal type, it is cross-platform and terminal, and one page adapts to multiple terminals.

Sports Acrobatics

So how to make a responsive layout? Here's how to unveil the responsive layout for you step by step:

Skill 1 learns to use Css3 Media Queries to choose different Css rules according to different screen resolutions.

Introduction to Media Queries syntax:

Max-width: if the width of the browsing area is less than 400 pixels, the following CSS description will be applied immediately:

CSS Code copies content to the clipboard

@ media screen and (max-width:400px) {.class {background:#ccc;}}

You can also separate the description to be applied into an external file:

CSS Code copies content to the clipboard

Min Width: if the width of the browsing area is greater than 800 pixels, the following CSS description will be applied immediately:

CSS Code copies content to the clipboard

@ media screen and (min-width:800px) {.class {background:#666;}}

Device Width: if the maximum visual range of the browsing device is 480px, the following CSS description will be applied immediately: (note: the current common maximum width of mobile phones is 480px, such as iPhone or Android Phone)

CSS Code copies content to the clipboard

@ media screen and (max-device-width:480px) {.class {background:#000;}}

Provide a dedicated css profile for iPhone4:

CSS Code copies content to the clipboard

Different css profiles are given for Portrait Mode (upright) and Landscape Mode (horizontal lying) browsing modes of iPad:

CSS Code copies content to the clipboard

Skill 2 adds a viewport tag to the page header

XML/HTML Code copies content to the clipboard

Browsers have launched the "viewport meta" tag, which is now supported by many mobile browsers. The W3C protocol definition viewport meta is still a draft, and many people will add the meta data of viewport to the html head. A typical mobile viewport is as follows:

XML/HTML Code copies content to the clipboard

This property controls the width of the view window. It can be set to the actual specific pixel width= 600 or set the width value for special devices.

The viewport setting properties are as follows:

Width: value can be set or specified as device-width

Height: value can be set or specified as device-height

Initial-scale: the initial proportion of entering the page for the first time

Minimum-scale: allow to reduce the minimum scale

Maximum-scale: maximum magnification allowed

User-scalable: allows users to zoom, 1 or 0 (yes or no)

The compilation process translates into the following semantics:

CSS Code copies content to the clipboard

@ viewport {width: device-width; initial-scale: 1.0}

Device-width is mainly to make the width of the entire page the same as the visual width of the phone, so that it can be easily compatible with different screen sizes. If the width is not set here, it will be taken as the default value according to the width given by html/css.

Because the resolution is different, sometimes device-width is not necessarily view width, so on a high-resolution machine like iphone 4, device-width=320, but the actual resolution is 480. at this time, you need to use javascript to make dynamic adjustments to UA.

User-scalable, this property allows the user to zoom in and out of the page. If the page does not allow the phone user to zoom, set 0 or no directly, otherwise, set 1 or yes to start the zoom function.

Next, we will explain several commonly used ways, as well as specific examples for your reference.

If we want the web page to be fixed on the mobile side, and we don't want the user to zoom at will, just set it as follows

XML/HTML Code copies content to the clipboard

If you want to use different zoom sizes in different device, you must use javascript, detect UA (User agent), and dynamically set viewport, as follows:

CSS Code copies content to the clipboard

Viewport = document.querySelector ("meta [name=viewport]")

Viewport.setAttribute ('content',' width=device-width; initial-scale=1.0; maximum-scale=1.0

Skill 3 does not use absolute width

Because the layout of a web page is adjusted according to the screen width, you cannot use a layout with absolute width (margin-left:5px) or elements with absolute width (for example, width:200px). Instead, it is best to use percentage width width:20%; or with:auto

Skill 4 fonts are best not absolute size (px), but relative size (em)

CSS Code copies content to the clipboard

Body {font: normal 100% Helvetica, Arial, sans-serif;}

The above code specifies that the font size is 100% of the default size of the page, or 16 pixels.

CSS Code copies content to the clipboard

H2 {font-size: 1.5em;}

The size of H2 is 1.5 times the default size, that is, 24 pixels (24max 16mm 1.5)

CSS Code copies content to the clipboard

.small {font-size: 0.875em;}

The size of the small element is 0.875 times the default size, or 14 pixels.

Here, by the way, is the difference between px pt em rem:

Px is the pixel, pixel, the most basic point for displaying data on the screen. In HTML, the default unit is px.

The pt is a point, a commonly used unit in the printing industry, equal to 1 canister 72 inches.

Em is the real "relative unit" (percentage, relative, of course), while px and pt are both absolute units (both have fixed values). Therefore, it is more appropriate to use em in general mobile terminal layout.

Rem is the emergence of css3 while introducing new units, while rem is relative to the root element, which means that we only need to determine a reference value in the root element and set the font size in the root element, which is up to your own needs.

Skill 5 Mobile layout (fluid grid)

The meaning of flow layout is that all positions are floating, not fixed.

CSS Code copies content to the clipboard

.main {float: rightright; width: 70%;} .leftBar {float: left; width: 25%;}

The advantage of float is that if the width is too small to hold two elements, the latter element will automatically scroll below the previous element without overflow (overflow) in the horizontal direction, avoiding the occurrence of horizontal scroll bars.

Automatic scaling and proportional scaling of Skill 6 pictures

CSS Code copies content to the clipboard

Img {max-width: 100%;}

In order to scale the picture proportionally, it is generally not necessary to specify the height of the picture. And it's best not to use background-image, because it won't scale proportionally.

These are the adaptive screen CSS responsive layout design skills shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

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.