The mobile terminal in response to the development of WEB layout
1. responsive development principles
1.1 responsive development principles
It is to use media queries layout and style settings for devices of different widths, so as to fit the purpose of different devices.
Division of equipment:
- Less than 768 for the ultra-small screen (mobile phone)
- Small screen devices between 768 ~ 992 (tablet)
- 992 ~ 1200 medium screen (desktop monitor)
- Widescreen greater than 1200 (large desktop monitor)
1.2 responsive layout container
Responsive required layout container as a parent to child element with change effect is achieved.
It is in principle different screen layout to change the size of the container through the media query, and then change the arrangement and size of the child elements inside in order to achieve different screens, to see different page layout and style changes.
The size of the parent container version of the heart is divided
- Ultra-small screens (mobile phones, less than 768px): set the width to 100%
- Small screen (flat, greater than or equal 768px): set the width to 750px
- Medium screen (desktop monitor, greater than or equal 992px): width to 970px
- Screen (large desktop monitors, greater than or equal 1200px): width to 1170px
But we can also define the division based on the actual situation of their own
2. bootstrap Introduction
2.1Bootstrap Profile
Bootstrap from on Twitter (Twitter), front-end frame is the most popular. Bootstrap is based on HTML, CSS and JAVASCRIPT, which is simple and flexible, so that Web developers more quickly.
Chinese net official website recommend website
Frame: As the name suggests is a set of architecture, it has a relatively complete solution for web function and control in the framework itself, there are pre-style libraries, components and plug-ins. Users should be developed in accordance with the provisions of a normative framework.
2.2 bootstrap advantage
- Standardized coding standard html + css
- Provides a simple, intuitive, powerful components
- It has its own ecosystem, constantly updated iteration
- Make development easier and improve the efficiency of the development
2.3 Introduction
2.xx: Stop maintenance, compatibility, and code is simple enough, the function is not perfect.
3.xx: Currently the most stable, but gave up IE6-IE7. But bad for IE8 support interface effects, tend to develop a responsive layout, mobile devices WEB priority projects.
4.xx: The latest version is not yet very popular
2.4bootstrap basic use
At this stage we have not contacted JS-related courses, so we only consider the use of its style library.
Bootstrap using four steps:
Create a folder structure
![[Image dump the chain fails, the source station may have security chain mechanism, it is recommended to save the picture down uploaded directly (img-SkyNHKG3-1577691849724) (./ images / 1.png)]](https://img-blog.csdnimg.cn/20191230154439688.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3BvbHVuemk=,size_16,color_FFFFFF,t_70)
Create html skeleton structure
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>The introduction of relevant style file
<!-- Bootstrap 核心样式--> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">Writing content
Bootstrap directly take pre-defined styles to use
Bootstrap modify the original style, attention to weight problems
Bootstrap is the key to learning is to know what it defines style, and what effect these styles can be achieved
2.5 bootstrap layout container
Bootstrap page content and needs to be wrapped in a grid system or .container .container-fluid container, it provides two useful for this class.
.container
- Responsive layout fixed width container
- Large screen (> = 1200px) width as 1170px
- In panel (> = 992px) width as 970px
- Small screen (> = 768px) width as 750px
- Ultra-small screen (100%)
.container-fluid
- Hundred percent flow layout container width
- Occupy all the viewport (the viewport) of the container.
2.6 bootstrap grid system
Bootstrap provides a responsive, mobile device priority streaming grid system, with the increase of the screen or viewport (the viewport) size, the system will automatically be divided into a maximum of 12.
Grid system is used to create page layouts by combining a series of rows (row) and column (column), you can put the contents of these create a good layout.
- 1 to 12 are divided into equal parts in different screens
- Row (Row) may be removed margins of the parent container action 15px
- xs-extra small: ultra-small; sm-small: small; md-medium: Medium; lg-large: large;
- Column (column) is greater than 12, the excess of element "column (column)" will be located as a whole from the other row arranged
- Each column has a default 15 pixels of padding
- May specify more than one device as the class name, for example, divided into different parts = class ". 4-COL-COL-MD-SM. 6"
---
Nested Grid
Grid system grid system built content nest again. Simple to understand a small column and then the column into a number of parts. We can add a new element, and a series of .row .col-sm- * .col-sm- * element to the already existing
within the element.
<!-- 列嵌套 -->
<div class="col-sm-4">
<div class="row">
<div class="col-sm-6">小列</div>
<div class="col-sm-6">小列</div>
</div>
</div>
Column offset
Use .col-md-offset- * based columns may be shifted to the right. These classes are actually increased by use of the selector * the left margin (margin) of the current element.
<!-- 列偏移 -->
<div class="row">
<div class="col-lg-4">1</div>
<div class="col-lg-4 col-lg-offset-4">2</div>
</div>
Column sorting
By using .col-md-push- * and .col-md-pull- * class you can easily change the row (column) order.
<!-- 列排序 -->
<div class="row">
<div class="col-lg-4 col-lg-push-8">左侧</div>
<div class="col-lg-8 col-lg-pull-4">右侧</div>
</div>
Responsive tool
In order to speed up the mobile device-friendly page development work, the use of media queries, and use these tools for different devices can easily show or hide the content of the page.
3. Ali one hundred cases show production
3.1 Technology Selection
Solution: We take a responsive page development plan
Technology: bootstrap framework
Design: This design uses sized 1280px
Project structure built
Bootstrap using four steps:
Create a folder structure
- Create html skeleton structure
- The introduction of relevant style file
Writing content
Width modified container
This effect is taken as FIG width 1280, and a maximum width of container which Bootstrap 1170px, so we need to manually change the width of the container
/* 利用媒体查询修改 container宽度适合效果图宽度 */
@media (min-width: 1280px) {
.container {
width: 1280px;
}
}