css-responsive layout

Posted May 26, 20201 min read

Responsive layout

The layout will be adjusted according to the screen width

1. Applied on pc
When it is detected that the user's screen resolution is small, for example, less than 1280px, the content area is 990px;
When the user's screen resolution is large, such as greater than 1420px, the content area is 1109px;
This change does not require programmers to adjust, the program is automatically used

2. Application in mobile devices(mobile)
The mobile phone webpage will use the terminal device and occupy the entire screen
Phone pixels and widths vary widely
iphone
Huawei
Xiaomi
The large e-commerce and large-volume websites combined with solutions 1 and 2 will be used(JD.com, Taobao, Tencent Video)

3. It can be opened in both pc and mobile devices(generally newbalance China/Tesla will use this solution)
If open in pc, put 6 columns in one row
If opened in the pad, put 4 columns in a row
If opened in the phone, put 2 columns in a row
grammar:
    1. Use media queries in the link
<link rel = "stylesheet" href = "./css/1-style-990.css" media = "(max-width:1300px)">
        <link rel = "stylesheet" href = "./css/1-style-1190.css" media = "(min-width:1300px) and((max-width:1600px))">
        <link rel = "stylesheet" href = "./css/1-style-1480.css" media = "(min-width:1600px)">
    2. Set via @media
@media screen and(max-width:1300px) {
              .wrapper {
                   width:990px;
              }
             /* You can add any responsive code * /
        }
        @media screen and(min-width:1300px) and(max-width:1600px) {
              .wrapper {
                   width:1190px;
             }
        }
        @media screen and(min-width:1600px) {
              .wrapper {
                 width:1480px;
              }
        }

Responsive layout framework

bootstrap