A practical summary of responsive web design (II.)

A practical summary of responsive web design (II.)

Read Catalogue

• Background knowledge:
• Gulp-less installation and configuration as follows

For the Responsive web summary, the previous 2 articles were summarized, which can be seen as follows:

Http://www.cnblogs.com/tugenhua0707/p/4147569.html

Http://www.cnblogs.com/tugenhua0707/p/4598657.html

Today we will explain how we develop the mobile side.

Back to Top

Background knowledge

For mobile CSS Media query development, you need to write different media queries for different mobile phones, the following CSS code:

For independent pixels between 320px and 359px

@media (min-width:320px) and (max-width:359px) {}

For independent pixels in the 360 to 399 pixel

@media (min-width:360px) and (max-width:399px) {}

For independent pixels in the 400 to 450 pixel

@media (min-width:400px) and (max-width:450px) {}

For independent pixels in the 640 to 999 pixel

@media (min-width:640px) and (max-width:999px) {}

As the CSS media query to write code, in order to better improve efficiency and development, we need to scale all mobile phones,

A: Font calculation method

For example, we can use REM for the font as a unit, the HTML element set 10px to calculate, the following HTML element font:

HTML {font-size:62.5%;/*10÷16x100% = 62.5%*/}

If the present design manuscript to our front-end is 720 pixels, then in the above media query font, width and height and margin,padding need to scale operation;

@media (min-width:320px) and (max-width:359px) {     //for 320-359 according to 320px to calculate    /*720/320 = 2.25*/Html{font-size:27.78%}//62.5%/2.25} @media (min-width:360px) and (max-width:399px) {     //for 360-399 according to 360px to calculate    /*720/360 = 2*/Html{font-size:31.25%}//62.5%/2} @media (min-width:400px) and (max-width:450px) {     //for 400-450 according to 400px to calculate    /*720/400 = 1.8*/Html{font-size:34.72%}//62.5%/1.8} @media (min-width:640px) and (max-width:999px) {     //for 640-999 according to 640px to calculate    /*720/640 = 1.125*/Html{font-size:55.56%}//62.5%/1.125}

Two: Calculation method of Width,height,margin and padding

For width,height,margin,padding for different mobile phones are also proportional scaling, such as in 720 pixels under the margin-top is 40px, then in 320,360,400,640 is calculated as follows: (other properties of the same calculation)

@media (min-width:320px) and (max-width:359px) {    /*720/320 = 2.25*/margin-top = 40px/2.25} @media (min-width:360px) and (max-width:399px) {        /*720/360 = 2*/margin-top = 40PX/2} @media (min-width:400px) and (max-width:450px) {    /*720/400 = 1.8*/margin-top = 40px/1.8} @media (min-width:640px) and (max-width:999px) {    /*720/640 = 1.125*/margin-top = 40px/1.125 }

As written on the code, we can see that the code on the PC side we write at the top, that is, for the PC side to do a copy of the page for the mobile side, so in the PC side of the CSS code to add CSS media query;

/* PC-side code is as follows */

.............

As above is all the PC side of the CSS code;

Then the mobile side of the CSS code, if there is different from the PC side, we need to write the following media query to overwrite, the following is the CSS Media query code;

........... CSS Media Query code

CSS Media Query code finished, we found that for width,height,margin,padding is nothing more than a multiplier (such as 720 of the page relative to the 640 on the page of the multiples is 1.125, no more than the use of width/1.125) and other properties ; so we want to be the same as JS if you can define a variable that's good, so think of the precompiled CSS of less (of course sass,stylus), using the less operation, then the code becomes as follows:

@media (min-width:320px) and (max-width:359px) {    /*720/320 = 2.25*/@multiple:2.25; //here is all the code. xx {width:40px/@multiple; margin:40px/@multiple;p adding:40px/@multiple;}} @media (min-width:360px) and (max-width:399px) {        /*720/360 = 2*/@multiple:2; //here is all the code. xx {width:40px/@multiple; margin:40px/@multiple;p adding:40px/@multiple;}} @media (min-width:400px) and (max-width:450px) {    /*720/400 = 1.8*/@multiple:1.8; //here is all the code. xx {width:40px/@multiple; margin:40px/@multiple;p adding:40px/@multiple;}} @media (min-width:640px) and (max-width:999px) {    /*720/640 = 1.125*/@multiple:1.125; //here is all the code. xx {width:40px/@multiple; margin:40px/@multiple;p adding:40px/@multiple;}}

As defined by a variable to write code, looking at the above code, we found that the code is not good, too cumbersome, for the mobile all the devices in the "below all the code" comment that the code below is the same, we are now thinking, if CSS can be the same as JS can be common that much good ah, So we're thinking about using the less algorithm; we can use. Mixin () such (name own)

Write the common code into the. Mixin (), as follows:

. Mixin () {

The following is all the common code

}

The following references can be used under each of the following conditions:

@media (min-width:320px) and (max-width:359px) {    /*720/320 = 2.25*/@multiple:2.25;    . Mixin (); //the following can write their own private CSS} @media (min-width:360px) and (max-width:399px) {    /*720/360 = 2*/@multiple:2;     . Mixin (); //the following can write their own private CSS} @media (min-width:400px) and (max-width:450px) {    /*720/400 = 1.8*/@multiple:1.8;     . Mixin (); //the following can write their own private CSS} @media (min-width:640px) and (max-width:999px) {    /*720/640 = 1.125*/@multiple:1.125;    . Mixin (); //the following can write their own private CSS}

As above, everything is perfect, but we know that we are now writing the less file inside, so if we want to see the page effect, we need to compile the less file, and after entering the corresponding directory, the following compile can be:

LESSC index.less > Index.css

This means that the Index.less file directory to survive Index.css, so we directly on the page and before the same as the introduction of INDEX.CSS, the following using link introduced:

<link rel= "stylesheet" href= "./css/index.css" media= "All"/>

There is no difference between the introduction of CSS and the previous.

But we now find a very annoying problem, we change the less file each time, and the previous changes to the CSS file, after the change after the page immediately refresh can see the effect, sometimes I refresh half a day, hey!! Why didn't it take effect? Think under the original this is less file, we need to compile can, but each change, we need to compile, this action is annoying, also very tired, I believe everyone is the same, so we need to consider whether less can be real-time monitoring, can be compiled in real-time, That is, as long as I change the less file, it can be compiled into CSS files in real-time, so we significantly improved efficiency! So search under found there are grunt and gulp, where we use the gulp-less plug-in to listen (do not use the grunt plug-in, because grunt configuration is not gulp convenient);

Back to Top

Gulp-less installation and configuration as follows

First of all we need to know is to install node and NPM Package Manager, with this environment, we can install gulp;

Gulp installation Tutorial as follows HTTP://WWW.DTAO.ORG/ARCHIVES/18 This is not the gulp to introduce;

Now let's take a look at my local directory structure:

1. We need to generate the Package.json file locally manually or automatically (using the command NPM init); Enter the root directory of the project and use the command as follows:

After filling out, a Package.json file will be generated in the root directory, and we'll look at the following Package.json content as follows:

{  "Name": "App2",  "Version": "1.0.0",  "description": "This was for study Gulp project",  "Main": "Index.js",  "Dependencies": {    "Gulp-less": "^3.0.3",    "Gulp": "^3.9.0"  },  "Devdependencies": {},  "Scripts": {    "Test": "Test"  },  "Repository": {    ' type ': ' Git ',    "url": "Http://www.github.com/xx"  },  "keywords": [    "Gulp-less"  ],  "Author": "Tugenhua",  "License": "ISC"}

Now let's look at the directory structure as follows:

2. Install gulp and gulp-less locally; run the following command after entering the root directory of the project NPM install Gulp–save-dev locally installed Gulp

Run command: NPM install gulp-less--save-dev

As described above, the installation was successful;

We can now view more than one Node_moudles folder under our root directory, click Enter to have the Gulp and Gulp-less folders as follows:

Now let's look at Package.json content as follows:

{  "Name": "App2",  "Version": "1.0.0",  "description": "This was for study Gulp project",  "Main": "Index.js",  "Dependencies": {    "Gulp-less": "^3.0.3",    "Gulp": "^3.9.0"  },  "Devdependencies": {    "Gulp-less": "^3.0.3"  },  "Scripts": {    "Test": "Test"  },  "Repository": {    ' type ': ' Git ',    "url": "Http://www.github.com/xx"  },  "keywords": [    "Gulp-less"  ],  "Author": "Tugenhua",  "License": "ISC"}

Next we need to create the Gulpfile.js code in the root directory as follows:

//Import Toolkit require (' Node_modules module ')varGulp = require (' Gulp '),//Where to install the Gulp locallyless = require (' gulp-less '); //Define a testless task (custom task Name)Gulp.task (' testless ',function() {GULP.SRC ('./css/index.less ')//The file that the task targets. Pipe (less ())//The module that the task calls. Pipe (Gulp.dest ('./css '));//The index.css will be generated under SRC/CSS}); Gulp.task (' Testwatch ',function() {Gulp.watch ('./css/*.less ', [' testless ']);//Call the Testless task when all less files are changed});//gulp.task (' Default ', [' testless ']);//define Default Tasks//Gulp.task (name[, Deps], fn) defining Tasks Name: Task Name Deps: Dependent Task name fn: callback function//gulp.src (globs[, Options]) perform task processing file globs: The path of the file processed (string or array of strings)//gulp.dest (path[, Options]) after processing the file generation path

Execute command

Execute Gulp testwatch on the command line to note that the command needs to be open after execution and the end of the listener event after the command is closed.

The above is basic to use if you need to compile multiple less file codes as follows:

Now when we manually modify the less file, it will be automatically compiled into a CSS file, so we are more convenient, as follows:

A practical summary of responsive web design (II.)