css Layout , Responsive knowledge
notes ： I've drawn attention to what I've done demo、 But you can't see it in the Nuggets , For details, please refer to my personal blog ： www.11qiaolj.github.io
In traditional float There are several common layout methods in layout , stay pc The end is particularly commonly used
That is, the left side is fixed , Adaptive layout on the right . Relatively simple .
Left floating fixed width
On the right margin Separate the left width
On the left , The right side is fixed , Middle adaptive layout . Often appear .
Self use margin Left and right make room for left and right
Left box margin-left:-100%
Right side box margin-left:- Self width
Similar to the twin wing layout .
The difference is , For the layout of the Holy Grail padding Set aside left and right positions
Left box margin-left:-100% + right: Self width
Right side box margin-right:- Self width
In order to adapt to different mobile phone screen sizes , Responsive layout came into being .
Not only on the mobile side , Various web pages for various devices are applied to responsive layout .
rem Is a unit based on the font size of the root node , It can change with the size of the root node font
Such as html Of font-size by 100px, that 1rem=100px.
Based on this principle , We can divide the screen into 10 Share （ Any number of copies ）
So it corresponds to 1024 Pixel screen , let html Of font-size=102.4px
If it is 670 Pixel screen , let html Of font-size=67px namely 1rem=67px
In this way, we can gradually change according to the change of screen size rem You can achieve responsive layout
that , How do we get the size of the screen ？ We used a media query ,media-query It can help us get the size of the current screen grammar ：
@media screen and (max-width:800px){
html{
font-size:80px; !important
}
}
Copy code This code means , The screen is smaller than 800px when , Root node font size is 80px
Use the media to search +rem It is true that a responsive layout can be achieved in this way .
But the related problem is , Responsive layout can only define the size of the root font in one section , It has the characteristics of stepwise change , It doesn't change in real time .
because rem The disadvantages of ladder ,vw and vh Brought solutions
Combine the previous rem and vw,flex Elastic layout provides a different way from traditional layout float Layout method , The arrangement of elements is realized through the main axis and side axis
display:flex // The parent container is flex Elastic box
flex-direction: row/columns // Define spindle direction
flex-warp:warp/nowarp // Define whether to wrap
justify-content:flex-start | flex-end | center | space-between | space-around;
// Define the arrangement of elements on the spindle Head alignment Tail alignment In the middle Edge at both ends around
align-items:flex-start | flex-end | center | baseline | stretch;
// Define the arrangement of elements on the secondary axis Head alignment Tail alignment In the middle The baseline fill
align-self:auto | flex-start | flex-end | center | baseline | stretch;
// Define the position of an element on the secondary axis head tail Bureau The baseline fill
flex:1; // Represents adapting to the remaining space
Copy code among ,flex：1 It's a key interview question ;
flex：1 It's made up of three attributes .
grid Layout is a new way of layout , Provide elements in 2 The arrangement on the dimensional plane . The disadvantage is that some browsers are incompatible .
display:grid // The parent container is set to grid grid
grid-template-colums/rows:1fr // Set rows / The size of each column
column/row-gap: // Set rows / Column spacing
grid-template-areas: // Set area
"a1 a1 a1"
"a2 a3 a3"
"a2 a3 a3";
align-items:/justify-items: // vertical / Horizontal alignment
grid-colum-start/end: // Start / End position
Copy code It is worth noting that grid Is based on 2 Dimensional , and flex It does face one-dimensional