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:

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

mysql add, delete, modify and query basic statements

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

mysql add, delete, modify and query basic statements

How to install MySQL 5.7.28 binary mode under CentOS 7.4

Solution to the automatic stop of MySQL service

CSS and HTML and front-end technology layer diagram

Use MySQL to open/modify port 3306 and open access permissions in Ubuntu/Linux environment

react-diagram serialization Json interpretation case analysis

Tutorial diagram of installing centos7.3 on vmware virtual machine

MySQL trigger syntax and application examples

Some CSS questions you may be asked during an interview

A brief discussion on Axios's solution to remove duplicate requests

Recommend

Simple example of adding and removing HTML nodes

A summary of the knowledge points of database indexing. Everything you need to know is here.

Illustration of properties such as offsetWidth, clientWidth, scrollWidth, scrollTop, scrollLeft, etc.

The pitfall record of the rubber rebound effect of iOS WeChat H5 page

Use Grafana+Prometheus to monitor MySQL service performance

A brief discussion on tags in HTML

How to implement Nginx reverse proxy for multiple servers

Summary of the dockerfile-maven-plugin usage guide

Getting Started Tutorial for Beginners⑧: Easily Create an Article Site

Solution to forgetting the password of the pagoda panel in Linux 3.X/4.x/5.x

Summary of solutions for MySQL not supporting group by

Linux server quick uninstall and install node environment (easy to get started)

Summary of some related operations of Linux scheduled tasks

An IE crash bug

The correct way to use MySQL indexes and detailed explanation of index principles