After mastering the layout of PC and mobile, we want to make the pages displayed on PC and mobile, which requires a responsive development. The same web page, according to the browsing device, different screen size, display different styles, as far as possible to display all the content, no matter the size of the screen, can be displayed normally.

Such as:

UE：www.uedna.com/

jQuery：jquery.com/

Bootstrap: www.bootcss.com/

PC:

Mobile client:

Technology stack

  • @media-cSS3 Media Query (Core)
  • Knowledge of viewport Settings on mobile terminals
  • The layout scheme
    • Elastic box model compatible with older versions
    • Percentage ratio
    • Rem unit adaptation
    • Front-end traffic framework

All four of the above layout schemes can be used in responsive layouts

Media queries

Set the display style for different sizes or devices

Media devices

  • All All types of devices (generally all works)
  • Screen Color screen device
  • Print Print preview
  • Speech screen reading

Media Search Keywords

  • And – Also, when there are more than one condition, you can concatenate with and to indicate that the style is loaded when all of the above conditions are met
// On all devices and screen size greater than or equal to1024pxIt's going to be green@media all and (min-width:1024px) {#list{
        background: green; }}Copy the code

  • ,- or, indicating that the style can be loaded as long as one of the conditions is met

  • // The screen size is greater than or equal to1024pxOr less than or equal to400pxIt's going to be green@media (min-width:1024px), (max-width:400px) {#list{
        background: green; }}Copy the code

  • Not – No: styles can be loaded for all conditions except one condition

// On non-color devices, the color is green@media not screen {
    #list{
        background: green; }}Copy the code
  • Only – Indicates that styles can be loaded only under certain conditions
// Green is displayed only on color devices@media only screen {
    #list{
        background: green; }}Copy the code

Media Features (Common)

All: www.runoob.com/cssref/css3…

  • The width of the

    • Min/max-width Minimum/maximum width

    • Min/max-device-width Specifies the minimum or maximum width of the device

    • Fit for different sizes

       /* Screen width is less than 768*/
       @media (max-width:768px) {
           #list li{
               width: 100%; }}/* The screen width is larger than 768 and smaller than 1024*/
        @media (min-width:768px) and (max-width: 1024px) {
            #list li{
                width: 50%; }}/* Screen width greater than 1024px*/
        @media (min-width: 1024px) {
            #list{
                width: 1024px;
            }
            #list li{
                width: 25%; }}Copy the code

  • Somehow the screen

    • orientation
      • Portrait portrait
      • Landscape landscape
    • Note: horizontal and vertical screen detection in media polling is calculated according to the ratio of width to height of visual area. When the width of visual area is greater than the height, it is identified as horizontal screen; when the height of visual area is greater than the width, it is identified as vertical screen.
      • But when we type in information and the soft keyboard pops up, the viewable area of the screen is compressed, and the viewable area is larger than the viewable area height, and then the landscape screen is switched
      • Use this property sparingly except on iPad devices and use JS to detect vertical and horizontal screens

  • Pixel than

    • -webkit-min-device-pixel-ratio

    • The 1px problem can also be solved with this method, different pixels have different ratio of bottom border pixels

      @media (-webkit-device-pixel-ratio: 2) {
    #list {
        border: 1pxsolid red; }}@media (-webkit-device-pixel-ratio: 3) {
    #list {
        border:.6666pxsolid red; }}@media (-webkit-device-pixel-ratio: 4) {
    #list {
        border:.25pxsolid red; }}Copy the code

Media query style sheets introduced

  • Cascading cover

    When style sheets are introduced from small to large, you will need to change the size of the style and write the same style in the large style sheet to override it

    	<link rel="stylesheet" href="index_min.css">
	<link rel="stylesheet" href="index_md.css" media="(min-width:992px)"> stylesheet" href="index_lg.css" media="(min-width:1336px)">
Copy the code

  • Conditional import is set through import

    @import url("css/index.xs.css");
@import url("css/index.md.css") (min-width: 992px);
@import url("css/index.lg.css") (min-width: 1400px);
Copy the code

    Must be written first in the style sheet

  • Set conditions directly when writing styles

    @media screen and (min-width:600px){	}
Copy the code

Responsive development mini-solutions

  • Beautiful white space

    When the screen size changes, it is best to design some white space

  • Current mainstream screen sizes

    Design different stylesheets for the main screen sizes and adjust them accordingly.

    screen Medium screen A small screen Super small screen
    The corresponding equipment Large screen display (machine) Laptop display screen ipad Mobile phone
    The corresponding size >=1200px >=992px >=768px <768px
    Display size 1170px 970px 750px auto

    • Plan 1 from small to large layout

      div{
    width: 100%;
    height: 80px;
    background: pink;
    margin: 0 auto;
}
@media screen and (min-width:768px) {div{
        width: 750px; }}@media screen and (min-width:992px) {div{
        width: 970px; }}@media screen and (min-width:1200px) {div{
        width: 1170px; }}Copy the code

    • Plan two from large to small layout

      div{
    width: 1170px;
    height: 50px;
    background: pink;
    margin: 0 auto;
}

@media screen and (max-width:1200px) {div{
        width: 970px; }}@media screen and (max-width:992px) {div{
        width: 750px; }}@media screen and (max-width:768px) {div{
        width: 100%; }}Copy the code

Front-end traffic framework

  • bootstrap v4.bootcss.com/

    • Compatible with

      @media is a cSS3 new style that is compatible with IE9+, but that doesn’t mean we can’t support it in older browsers

      Here we need to import two files:

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
Copy the code
      • Html5shiv: Create H5 tags with JS for support in older browsers
      • Respond: Supports response. Uses JS to determine whether the screen size changes

  • ant-design ant.design/index-cn

  • Element UI 2+3

    • vue2 :element.eleme.cn/#/zh-CN
    • vue3:
      • Community edition: element3-ui.com/#/
      • Element UI plus :element-plus.gitee.io/#/zh-CN

Supplementary case Mobile APP home page