04- Mobile WEB development _ responsive layout

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/weixin_45555964/article/details/100587009

Mobile WEB development _ responsive layout

01- responsive layout principles

• Use media queries corresponding layout and style settings for different sized devices

02- responsive layout container

• By changing the size of the media query layout container, and then change the layout of the sub-elements, thereby achieving different layouts different devices

• 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

• You can also define divided according to their actual situation

03-bootstrap Profile

• Bootstrap is based on HTML, CSS and JAVASCRIPT, which is simple and flexible, making Web development faster

  • Chinese net official website recommend website

• advantage:

  • Standardized coding standard html + css
  • It provides a simple, intuitive, powerful components
  • It has its own ecosystem, constantly updated iteration
  • Make development easier and improve the efficiency of the development

• Version: Recommended 3.xx, currently used multi-user, the most stable, mobile end priority, biased in favor of responsive layout

04-bootstrap use

• Episode IV:

  • Create a folder structure
    • lib folder: special place to download a good reference documents, such as: bootstrap folder
  • Create html skeleton structure

  [Image dump outer link failure (img-1YReHOzP-1567776673497) (04- Mobile WEB development _ responsive layout .assets / 1567161969718.png)]

  <!--[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]-->
  

  • The introduction of relevant style file

  <!-- Bootstrap 核心样式-->
  <!-- 已经包含了normalize.css初始化文件 -->
  <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

05-bootstrap layout container

• .container: responsive layout 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: flow layout container
  • 100% width, occupy the entire viewport (the viewport), suitable for the development of a separate mobile terminal
• Note: Direct call your bootstrap class

06-bootstrap grid system

• The width of the page is divided into a plurality of equal-width parts column grid system is used by combining a series of rows (Row) and the column (column) to page layout
• With the increase of the screen or bootstrap viewport (the viewport) size is automatically divided into 12

07-bootstrap grid system parameters

[Image dump outer link failure (img-phhOAD9G-1567776673498) (04- Mobile WEB development _ responsive layout .assets / 1567162549877.png)]

• Line: .row
  • Must be included in the container (can be nested within the col)
  • Own son can only be col
• Column: col
  • x is the number of columns occupied
  • Ultra-small: .col-xs-x
  • Small: .col-sm-x
  • In: .col-md-x
  • Large: .col-lg-x
• Special Note
  • When the total sub-elements exceeds 12 parts, the excess will be displayed in another row
  • Each column has a default of 15px padding around
  • Class names may contain a plurality of simultaneously

08-bootstrap nested grid

• Cancellation of the parent element padding value

• And high child elements of the same parent

<!-- row含有col，而col作为父盒子嵌套row时  可以取消爷爷元素row的padding值 且嵌套row中的子元素高度和爷爷级一样高-->
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-6">
    	   		</div>
                <div class="col-md-6">
    	   		</div>
            </div>
        </div>
    </div>
</div>

09-bootstrap column offset grid system

• Column offset: offset
  • Ultra-small: col-xs-offset-x
  • Small: .col-sm-offset-x
  • In: .col-md-offset-x
  • Large: .col-lg-offset-x

10-bootstrap column sorting grid system

• Push: push
  • Ultra-small: .col-xs-push-x
  • 小：.col-sm-push-x
  • 中：.col-md-push-x
  • Large: .col-lg-push-x
• Pull: pull
  • Ultra-small: .col-xs-pull-x
  • 小：.col-sm-pull-x
  • 中：.col-md-pull-x
  • Large: .col-lg-pull-x

11-bootstrap grid system response tool

• Hide page content: .hidden
  • Ultra-small screen to hide: .hidden-xs
  • Small screen to hide: .hidden-sm
  • Hidden in the screen: .hidden-md
  • Big screen to hide: .hidden-lg

00- summary

You can directly call the class name has been packaged good bootstrap file, programming easier.

Rely layout container bootstrap, and then set the size of css styles according to four different screen sizes of screen size page, change the whole page as screen size and change.

Each screen sizes are focused on the details of the change, it is necessary to carefully tune the details of each element.