1. The flex layout

1.1 Media Query

@media screen

Device-width is the width of the device;

Width is the visible width of the browser.

Media query import

1<style></style>2External stylesheet <link href="css/test.css" rel="stylesheet">
<link href="aa.css" rel="stylesheet" media="(min-device-width: 100px) and (max-device-width: 300px)"
Copy the code

1.2 the flex layout

Flex has main axis (main axis) and cross axis (cross axis). The main axis is aligned with the internal elements of the box. Flex-direction Specifies the arrangement of child elements in the parent element boxrow: Default value, displayed from left to right. Row-reverse: The same as row, but displayed in reverse order.column: Flexible items will be displayed vertically, from top to bottom. Column-reverse: The same as column, but in the reverse order. #box{display:flex; flex-direction:row; flex-wrap:warp; } flex-wrap: nowrap/wrap/wrap-reverse default values, no line breaking or column breaking, line breaking or column breaking, line breaking or column breaking, but in reverse order./* flex-direction: row; flex-wrap: wrap; * /flex-flow: row wrap; It means horizontal center. It's up2Short for jstify-content// It is used to set spacing when there is free spacejustify-content: Flex-start \flex-end\center\space-between\space-aroud \ from left to right, from right to left, evenly distributed on the line, with no space between the two sides, evenly distributed on the line, Leave half the space between the two sides. Align -items: controls where the cross axis is displayed flex-start: starts flex-end: ends center: middle Align-items sets the default alignment of each Flex element on the cross axis. Align -content treats multiple lines of content as a whole. Flex-basis: sets the flex base value of an elastic box. Flex-grow: indicates how much space is occupied by the remaining space. Flex-shrink: indicates how much space is occupied by the excess spaceflex: flex-grow(the expansion rate) flex-basis(the size of the box) flex-shrink:0Not allowed to zoom out note that normally writing flex:1When is equal to the flex:1 1 0%
Copy the code

1.3 case

Input box to obtain device informationlet userAgent = navigator.userAgent.toLowerCase()
Copy the code

1.4 rem use