Basic review (10) | Responsive layout—Ali Baixiu

Responsive layout-Ali Baixiu

Principles of Responsive Development

Use media queries to set the layout and style for devices of different widths to adapt to the purpose of different devices

Equipment division	Size range	Set width	Column prefix
Ultra small screen (mobile phone)	<768px	100%	.col-xs-
Small screen device (tablet)	>=768px ~ < 992px	750px	.col-sm-
Medium screen (desktop)	>=992px ~ < 1200px	970px	.col-md-
Widescreen device (large desktop)	>=1200px	1170px	.col-lg-3

• Responsive requires a parent as the layout container to match its elements to achieve the effect of change. The principle is to change the size of the layout container through media queries on different screens, and then change the arrangement and size of the child elements inside. So that you can see different page layout and style changes on different pages

@media screen and (max-width:767px) {//小屏设备下的布局为100%
            .container {
                width: 100%;
            }
        }

@media screen and (min-width:768px) {//中屏设备下的
            .container {
                width: 750px;
            }
        }

Bootstarp framework

Introduction

Front-end development framework -based on HTML, CSS, JS, concise and flexible, making WEB development faster

• Framework: a set of architecture, complete webpage functional solutions, pre-made style libraries, components and plug-ins

• Advantages: Standardized coding specifications provide a set of intuitive and powerful components, constantly update and iterate, and improve development efficiency

• Four steps: 1. Create folder structure 2. HTML skeleton 3. Import related file style 4. Write content

• It is used directly through the class name. If you want to add your own style, you just use style to make appropriate changes directly

  Container-fluid class flow layout container, 100% width, independent mobile development

Layout container

Need to wrap a .container container for the page content and grid system. Two types are provided

• container class

  • Responsive container fixed width
  • Set a fixed value px for large, medium and small screens

• container-fluid class

  • Flow layout container, 100% width
  • Occupy all viewport containers, use to make mobile page development
  • Always keep the same width as the parent container

Grid system

• Divide the page layout into columns of equal width, modularize the page layout through the definition of the number of columns, and the system divides it into 12 columns uniformly

• The existing rows have more columns, and the specific division of the columns needs to add the column prefix, .col-lg-3 (how many equal parts of each column in 12 copies)

  • The sum of the number of columns should be equal to 12. The column is exactly equal to 12 to fill the entire container, if it is not enough, there will be blanks, if the number of columns added exceeds 12, the extra column will be displayed on a new line
  • You can also add "class= col-lg-3 col-md-4" at the same time

• There is a padding value of 15px left and right in each column. The principle is to give 33.3% of the width distance and float to the left. If you directly give this +margin border, there will be overflow and fall. We need to add another box to the column and set it Padding

• Column nesting problem

  • Put two boxes directly in the column, there is a problem that the top grid cannot be displayed
  • If we add a row box before the column, we can cancel the padding of the parent element , and the height will consciously be the same as the parent height

• Column offset problem

  • In order to realize that the content inside can be distributed separately, the right box is shifted to the right, and the blank content can be displayed in the middle.

  • col-md-offset-4 to achieve the right offset, the left box adds a margin value

• Column sorting problem

  • col-lg-push-8 Push the box on the right col-lg-pull-4 Pull the box on the left

• Column hidden display problem

  • hidden-xs/sm/md/lg can hide content under different circumstances
  • visible-xs/sm/md/lg displays content under different circumstances

Practical exercise

Screen division

• The layout of the medium screen and the large screen are the same, only need to use col-md, which is greater than or equal to 970
• Zoom out and find that the style of the small screen has changed, set to col-sm
• The style under the ultra-small screen has also changed, so it needs to be set to col-xs

Container width modification

• Modify the style separately in the css file!important

layout

• Add col-sm/xs attribute class where you need to change different styles to achieve display in different situations