current position:Home>Responsive gulp Chinese network of web front end

Responsive gulp Chinese network of web front end

2022-04-29 12:23:2751CTO


introduction

Gulp.js It's an automated build tool , Developers can use it to automate common tasks during project development , and Gup Chinese website is the most popular website for users , This test question will realize Gulp Chinese Web page response .

Method

This experiment mainly applies CSS3 Multimedia query statements in (@media), Multimedia query can replace the original style with the corresponding style on the specified device .

Used in the test questions css attribute :

!important

You can override the style of the parent , Priority display

display:none

Indicates that this element will not be displayed

position: absolute

Generate absolute positioning elements , Positioning relative to the first parent element other than positioning

Experimental results and discussion

  1. Preparatory work
  1. Unzip the basic code , And open... On the right side of the environment 【Web service 】

    Web Front end response Gulp Chinese net _css

  2. Click on F12(F12+Fn), Open Google debugging tool

    Web Front end response Gulp Chinese net _vue_02

  3. If the @media The attribute is not familiar with , You can learn the basic principles in the rookie tutorial

    ( link :https://www.runoob.com/css3/css3-mediaqueries.html)

    Web Front end response Gulp Chinese net _java_03

  1. Examination needs
  1. max-width by 1400px when , The page effect is navigation bar 、 The width of the contents of the middle list becomes 900px.
      
      
/* CSS3 Multimedia query */
@media screen and (max-width:1400px) {
nav .content,
main.clear section,
main.clear ul {
/* !importanrt You can override the style of the parent , Make the browser execute the statement first */
width: 900px !important;
}
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

Web Front end response Gulp Chinese net _vue_04

2.2 Width max-width by 900px when , The page effect is navigation bar 、 The content width of the middle list becomes 700px

      
      
/* The format needs to be standardized , Space cannot be less */
@media screen and (max-width: 900px) {
nav .content,
main.clear section,
main.clear ul,
main.clear ul li {
width: 700px!important;
}
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

Web Front end response Gulp Chinese net _css_05

2.3 Width max-width by 650px when , Head navigation hidden , And display the icon on the right , The width of the bottom list is 100%.

      
      
@media screen and (max-width:650px) {
.list{
/* Hide list */
display: none;
}
footer{
width: 100% !important;
}
nav .content .menu {
display: block;
/* Absolute positioning */
position: absolute;
/* The distance can refer to the... On the left h1 label */
top: 13px;
right: 10px;
}
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.

Web Front end response Gulp Chinese net _python_06

  1. Complete experimental code
      
      
@media screen and (max-width:1400px) {
nav .content,
main.clear section,
main.clear ul {
width: 900px !important;
}
}
@media screen and (max-width: 900px) {
nav .content,
main.clear section,
main.clear ul,
main.clear ul li {
width: 700px!important;
}
}
@media screen and (max-width:650px) {
.list{
display: none;
}
footer{
width: 100% !important;
}
nav .content .menu {
display: block;
position: absolute;
top: 13px;
right: 10px;
}
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.

Conclusion

The problem solved in this experiment is Web Blue bridge online simulation cup : Response type Gulp Chinese net , Using technology Css3 Medium @media( Multimedia query ) style , When solving problems, we need to focus on @media The writing format of 、css Class selector name for 、!important Correct use of style . The training related to the Blue Bridge Cup simulation will continue in the future , Strive to solve more challenging problems and form relevant blogs .


author : Deng Xueting



copyright notice
author[51CTO],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291018227019.html

Random recommended