Summary of relevant knowledge points on how adaptive web design is achieved

Summary of relevant knowledge points on how adaptive web design is achieved
How does "adaptive web design" work? It’s actually not that difficult.

1. Allow the web page width to adjust automatically:

First, add a line of viewport meta tag to the head of the web page code.

Copy code
The code is as follows:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, width=device-width"/>

viewport is the default width and height of the web page. The above line of code means that the web page width is equal to the screen width (width=device-width) by default, and the original scaling ratio (initial-scale=1) is 1.0, that is, the initial size of the web page occupies 100% of the screen area.

For the old IE6, 7, 8 browsers, js processing is required. Since the main platforms are iOS and Android, we can temporarily ignore the lack of support from Opera.

2. Don’t use absolute width

Since the web page will adjust its layout according to the screen width, you cannot use an absolute width layout or elements with absolute width. This one is very important.

Specifically, CSS code cannot specify pixel widths:

width:xxx px;

Only percentages can be specified to define column widths:

width: xx%;

or:

width:auto;

or:

Use maximum width and maximum height max-width, max-height;

3. Relative font size

Fonts cannot be sized in absolute (px) sizes, only in relative (em) sizes.

Copy code
The code is as follows:

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

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

Copy code
The code is as follows:

h1 {
font-size: 1.5em;
}

The h1 is then sized 1.5 times the default size, which is 24 pixels (24/16=1.5).

Copy code
The code is as follows:

small
font-size: 0.875em;
}

The size of the small element is 0.875 times the default size, which is 14 pixels (14/16=0.875).

4. Fluid grid
"Fluid layout" means that the positions of each block are floating, not fixed.

Copy code
The code is as follows:

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

The advantage of float is that if the width is too small to accommodate two elements, the latter element will automatically scroll to the bottom of the former element and will not overflow horizontally, thus avoiding the appearance of a horizontal scroll bar.
In addition, you must be very careful when using absolute positioning (position: absolute).

5. The core of "adaptive web design" is the Media Query module introduced by CSS3

What it means is that it automatically detects the screen width and then loads the corresponding CSS file.
media="screen and (max-device-width: 400px)"
href="tinyScreen.css" />
The above code means that if the screen width is less than 400 pixels (max-device-width: 400px), load the tinyScreen.css file.
media="screen and (min-width: 400px) and (max-device-width: 600px)"
href="smallScreen.css" />
If the screen width is between 400px and 600px, the smallScreen.css file is loaded.
In addition to loading CSS files using HTML tags, you can also load them in existing CSS files.
@import url("tinyScreen.css") screen and (max-device-width: 400px);

6. CSS @media rules

In the same CSS file, you can also choose to apply different CSS rules according to different screen resolutions.

Copy code
The code is as follows:

@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}

The above code means that if the screen width is less than 400 pixels, the column block will be unfloated (float:none), the width will be automatically adjusted (width:auto), and the sidebar block will not be displayed (display:none).

Use a linear design for columns and floats:

Copy code
The code is as follows:

@media screen and (max-width: 480px) {
div,li {
display: block;
float:none;
width:100%;
}
}



7. Fluid image

In addition to layout and text, "responsive web design" must also achieve automatic scaling of images.
This only takes one line of CSS:
img { max-width: 100%;}
This line of code also works for most videos embedded in web pages, so it can be written as:
img, object { max-width: 100%;}
Older versions of IE do not support max-width, so you have to write:
img { width: 100%; }
In addition, when scaling images on the Windows platform, image distortion may occur. At this time, you can try to use IE's proprietary command:
img { -ms-interpolation-mode: bicubic; }
Alternatively, imgSizer.js by Ethan Marcotte.

Copy code
The code is as follows:

addLoadEvent(function() {
var imgs = document.getElementById_x_x_x_x("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});

However, if conditions permit, it is best to load images of different resolutions according to screen sizes. There are many ways to do this, both on the server and client side.

8. Home page content search bar, product categories, popular products, keywords.

9. Avoid horizontal scroll bars

Sometimes images or other page elements prevent the container element from flowing normally. The following script can easily prevent this behavior:

Copy code
The code is as follows:

img,iframe {max-width:100%;box-sizing:border-box;}

<<:  Introduction to partitioning the root directory of Ubuntu with Vmvare virtual machine

>>:  CSS3 filter code to achieve gray or black mode on web pages

Recommend

Vue uses rules to implement form field validation

There are many ways to write and validate form fi...

How to Clear Disk Space on CentOS 6 or CentOS 7

Following are the quick commands to clear disk sp...

uni-app WeChat applet authorization login implementation steps

Table of contents 1. Application and configuratio...

Writing a rock-paper-scissors game in JavaScript

This article shares the specific code for writing...

MySQL 5.6 installation steps with pictures and text

MySQL is an open source small relational database...

Notes on MySQL case sensitivity

Table of contents MySQL case sensitivity is contr...

How to modify the default storage engine in MySQL

mysql storage engine: The MySQL server adopts a m...

React ref usage examples

Table of contents What is ref How to use ref Plac...

MySQL 8.0.13 download and installation tutorial with pictures and text

MySQL is the most commonly used database. You mus...

jQuery realizes the scrolling effect of table row data

This article example shares the specific code of ...

Some details about semicolons in JavaScript

Preface Semicolons in JavaScript are optional, an...

How to query a record in Mysql in which page of paging

Preface In practice, we may encounter such a prob...

Mysql desktop tool SQLyog resources and activation methods say goodbye to the black and white command line

Without further ado, let’s get started with resou...

Tutorial on how to install and configure the unzipped version of MySql under Windows 10

Install the unzipped version of MySql database un...

Summary of MySQL lock related knowledge

Locks in MySQL Locks are a means to resolve resou...