current position：Home>Responsive gulp Chinese network of web front end
Responsive gulp Chinese network of web front end
2022-04-29 12:23:27【51CTO】
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
- Preparatory work
Unzip the basic code , And open... On the right side of the environment 【Web service 】
Click on F12（F12+Fn）, Open Google debugging tool
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）
- Examination needs
- 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.
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.
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.
- 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
The sidebar is recommended
- JavaScript functions -- pre parsing, Iife, advanced functions, recursion
- JavaScript object
- How to introduce element plus gracefully in vue3 project on demand
- Component slot Vue js
- How to write game interface style in HTML
- Ask some front-end questions.
- Information ｜ driverless taxi has come to Beijing. Xiaoma Zhixing has been approved to carry out automatic driving service in Beijing
- [taro react] - H5 route configuration cancels ＃ on the route
- Reverse advanced, using ast technology to restore JavaScript obfuscated code
- JavaScript object
guess what you like
Vue introduces vant / elementul
JavaScript queue“
Vue content summary
vue3. 0
Small tips: detection of JS font loading failure or completion
CSS is a box that has been climbing
Leetcode215 - the kth largest element in the array - quick sort - quick select - template
CSS adds effect to the four corners of div
HTTP error 500.19 internal server error occurred in the integration pageoffice of aspnetcore project,
Front end ＜ TD ＞ what is the word limit of the label
Random recommended
- Construction and development of automatic test platform based on HTTP runner
- Application of RT thread - use RT thread on stm32l051 (v. conclusion of wireless temperature and humidity sensor)
- Expose Dubbo to HTTP service
- Put the front end into the spring cloud project
- Front end learning day 4 - CSS
- Vue URL jump page with parameters
- JavaScript Chapter 13 traversal of arrays and implicit parameters of function methods
- These CSS efficiency improvement skills, you need to know!
- Beijing has opened the pilot of unmanned operation of passenger cars, and the driverless air outlet has arrived
- Test theory series - Test Case elements and design methods Part II
- How to make the peak value of measured output voltage not less than 2V
- Hexo quickly set up its own blog
- Gee synthetic cloudless landsat-8 and sentry-2 data
- Prototype object creation method case JavaScript specific implementation steps
- YAF CLI and HTTP access modes
- Simple HTML + CSS animation web page production DW simple animation web page production
- The correct way for web programmers to make a pink girl series happy birthday blessing web page (HTML + CSS + JS)
- HTML + CSS + JS to make simple animation web pages
- HTML gourmet web page production DW static web page production div + CSS gourmet web page implementation and production
- Programmer 520 Tanabata Valentine's Day confession code HTML + JS + CSS petal photo album web page template programmer confession necessary
- Element notify notification prompt text wrap
- Belkin: it's too early to talk about real wireless space charging
- JavaScript ES6 set (set) type* ω *
- Understand JavaScript function execution process and scope chain
- Java project: nursing home management system (java + springboot + thymeleaf + HTML + JS + MySQL)
- Java project: drug management system (java + springboot + HTML + layui + bootstrap + seals + MySQL)
- An error is reported when installing hexo during hexo deployment. What is the reason and how to solve it (tag git | keyword path)
- [front end basics] Linux command: Project Automation deployment
- Less than 100 or win Porsche, Maserati "special supply" 3.0T technical analysis
- Introduction to basic methods of math built-in objects in JavaScript
- CSS matches the nth element of the parent element
- What is the commercialization process of unmanned robotaxi after China allows driverless steering wheel?
- A lot of trouble, cook also worried: a quarter less than $8 billion
- Ajax realizes no refresh paging (no refresh paging shopping cart source code)
- [flutter topic] 101 what is flutter elements Yyds dry goods inventory
- What is the commercialization process of unmanned robotaxi after China allows driverless steering wheel?
- A lot of trouble, cook also worried: a quarter less than $8 billion
- Element acquisition of data structure c language sequence stack
- Set video label based on Vue
- CSS realizes div width adaptation, and the proportion of height and width is fixed