Percentage layout
Percentage layout (streaming layout) is based on the percentage unit “%” to achieve a responsive effect to different screen widths. Percentage layout is widely used in layout, which makes the width and height of the components on the page change with the width and height of the browser, so as to achieve responsive effect. Disadvantages: It is difficult to calculate a large number of percentage values. Each attribute uses percentage, and the attribute relative to the parent element is not unique, which makes the layout complicated (margin and padding are both vertically and horizontally relative to the width of the parent element, border-radius and translate are relative to the element itself, Position element attributes relative to directly non-static positioned parent elements..)
CSS: The unit is %. The value is the ratio of the element attribute value divided by the element attribute value
Vw/vh
Vw /vh is a new relative unit of CSS3. The viewport is divided into 100 units for the width/height of the viewport, and each unit is equal to 1VW /vh
- Vw: Percentage of viewport width (100vw equals 100% of viewport width)
- Vh: percentage of viewport height (100vh equals 100% of viewport height)
Vw/VH sets the size of the element to make it responsive to different screen widths
CSS: the unit is VW /vh. Take the ip6 design drawing as an example, 1px = (1/375) *100 VW /vh
@media Media query
@media Media query Can query different media types to achieve different styles. In particular, responsive pages can achieve multiple styles based on different screen sizes of different media types. Disadvantages: Configuring multiple response breakpoints may cause responsive fault, which is unfriendly to users
Common media types:
- All: Applies to all devices
- Print: For printers and print previews
- Screen: used on computer screens, tablets, smart phones, etc
- Speech: Used in speech devices such as screen readers
Common query keywords:
- Not: Used to exclude a media type
- Only: indicates a specific media type
- All: used for all media types
- And: connects multiple media features
Common media features:
- Width: width of the visible area of the page on the output device
- Height: Width of the visible area of the page on the output device
- Max-width/max-height: indicates the maximum width/height of the page visible on the output device
- Min-width/min-height: indicates the minimum visible area width/height of the page in the output device
1. Embedded CSS:
// Use different CSS codes by querying different media types@media screen and (min-width:1200px) {// CSS code}@media screen and (min-width:992px) {// CSS code}@media screen and (min-width:768px) {// CSS code}@media screen and (min-width:480px) {// CSS code}Copy the code2. External chain CSS:
// Import different CSS files by querying different media types<link rel="stylesheet" media="screen and (min-width:1200px)" href="a.css">
<link rel="stylesheet" media="screen and (min-width:992px)" href="b.css">
<link rel="stylesheet" media="screen and (min-width:768px)" href="c.css">
<link rel="stylesheet" media="screen and (min-width:480px)" href="d.css">
Copy the codeViewport Port adaptation
A viewport is a browser viewport that represents the viewport area of the browser, the area of the device’s screen that displays web pages
Viewport meta tag content attribute value:
- Width =device-width: indicates that the width is equal to the screen width of the device (can also be equal to a positive integer).
- Initial-scale =1.0: indicates the initial scaling scale (the default scale when the page initially loads)
- Minimum-scale =1.0: Indicates the minimum scale that the user is allowed to scale
- Maximum-scale =1.0: indicates the maximum scale allowed by the user
- User-scalable =no: indicates whether users can scale manually (no: not allowed, yes: allowed)
Js: Dynamically set the scaling scale so that different device widths are equal to the same width
window.onload = function() {
// Get the screen width
var screenW = window.screen.width;
// Target width (ip6 375 for example)
var targetW = 375;
// Set the zoom scale so that different device widths are the target widths
var scale = screenW/targetW;
var meta = document.createElement("meta");
meta.name = "viewport";
meta.content = "width=device-width, initial-scale="+scale+", mininum-scale="+scale+", maximum-scale="+scale+", user-scalable=no"
document.head.appendChild(meta);
};
Copy the codeCSS: Take the IP6 design diagram as an example. The size is the actual PX size
Rem adaptation
Rem is CSS3’s new unit of relative length, calculated relative to the size of the font size of the root element (HTML). 1rem is the px value of the font size of the root element
Method 1: Dynamically set font size + REM adaptation for the root element
Disadvantages: Use JS to dynamically set the font size value of the root element, coupling JS and CSS together, increasing dependencies between files
Set viewPort meta:
<meta name="viewport" content="Width =device-width, initial-scale=1.0, mininum-scale=1.0, maximum-scale=1.0, user-scalable=no">
Copy the codeJs: Dynamically sets the root element font size based on the browser display area width
window.onload = function() {
// Get the root element (HTML)
var html = document.documentElement
// Get the width of the browser display area
var clientW = html.clientWidth
// Set the font size of the root element according to the width of the browser display area for REM adaptation (ip6 375 as an example)
html.style.fontSize = clientW/3.75+'px'
}
Copy the codeCSS: unit is REM, take ip6 design as an example, size is actual PX size divided by 100 (1px = 0.01rem)
Method 2: CSS calc() + REM adaptation
The CSS calc() function is used to dynamically calculate the length value, allowing us to perform mathematical operations in the attribute value. Automatic calculation is achieved by calc() function and VW attribute. Setting the font size of the root element Disadvantages: The calc() function has compatibility issues
Set the root element font size:
<style>
/* Take ip6 375 as an example, design size 750/100 */
html {
font-size: calc(100vw / 7.5);
font-size: -moz-calc(100vw / 7.5);
font-size: -webkit-calc(100vw / 7.5);
}
</style>
Copy the codeCSS: unit is REM, take ip6 design as an example, size is actual PX size divided by 100 (1px = 0.01rem)
Method 3: VW sets font size + REM fit for the root element
Vw is used to set the font size of the root element, so that the font size of the root element can achieve a responsive effect to different screen widths, and then THE adaptation of the element size is realized through REM (the size of REM is calculated relative to the font size value of the root element HTML).
Set the root element font size:
<style>
/* Take ip6 375 as an example */
html {
font-size: 100px;
/* Set the root element font size by vw: 100px=100/375=0.26666666vw */
font-size: 0.26666666 vw;
}
</style>
Copy the codeCSS: unit is REM, take ip6 design drawing as an example, size is actual PX size (1px = 1rem)
Flexible box (Flex layout)
Flexible Box CSS3 Flexible Box (or Flexbox) is a layout method that ensures the appropriate behavior of elements when a page needs to adapt to different screen sizes and device types
Contents of elastic box:
- Display: Flex/inline-flex; Define it as an elastic container
- Elastic child (Flex Item) : The child of an elastic container
Common attributes of elastic box:
- Flex-direction: sets the arrangement of neutron elements in the elastic box
- Row: Default for child elements aligned horizontally from left to right (left-aligned)
- Row-reverse: Child elements are aligned horizontally (right-aligned), from back to front, with the last item in front
- Column: Child elements are arranged vertically from top to bottom
- Column-reverse: The child elements are reversed vertically, from back to front, with the last item at the top
- Context-content: Sets the alignment of the elastic box’s neutron elements along the main axis (horizontal axis)
- Flex-start: The default, with the child elements at the beginning of the container, placed flush
- Flex-end: Child elements are placed at the end of the container, in order of alignment
- Center: Child elements are placed in the center of the container, one after the other, flush
- Space-between: Child elements in containers with the same empty space between rows
- Space-around: Child elements in a container with the same empty space before, between, and after each row
- Align-items: Sets the alignment of the neutrons on the side axis (vertical axis) of the elastic box
- Stretch: Default, child elements are stretched to fit the entire container
- Center: The child element is placed in the center of the container
- Flex-start: Child elements are placed at the beginning of the container
- Flex-end: The child element is placed at the end of the container
- Baseline: Child elements are placed at the baseline of the container
- Flex-wrap: Sets the line wrap of the elastic box’s neutron elements
- Nowrap: Default, no line breaks for child elements, overflow over part
- Wrap: Line wrap if the child element is exceeded
- Wrap-reverse: Lines are wrapped in reverse order when child elements are exceeded
- Align-content: Changes the behavior of the flex-wrap property, like align-items, but instead of setting the alignment of child elements, it sets the alignment of lines
- Stretch: Default value, rows will stretch to take up the remaining space
- Flex-start: Stack each row to the start position of the elastic box container
- Flex-end: Stack each line toward the end of the elastic box container
- Center: Stack each row in the middle of an elastic box container
- Space-between: Rows are evenly distributed in an elastic container
- Space-around: The rows are evenly distributed in an elastic box container, with each end retaining half the spacing between the child elements
Common attributes of elastic child elements:
- Order: Sets the order of elements
- < INTEGER > : The value is an integer number. It can be a negative value. The default value is 0
- Flex-grow: Sets the size of the element
- < number > : the value is a number. The ratio of elements to the remaining space is 0 by default. That is, if there is remaining space, the remaining space is not enlarged
- Flex-shrink: Sets the scaling of elements
- < number > : The value is a number. The percentage of the element that shrinks when the space is insufficient. The default value is 1, that is, if the space is insufficient, the element will shrink, if the space is insufficient, the element will shrink equally
- Flex-basis: sets the amount of space on the main axis that an element occupies before allocating extra space. Based on this property, the browser calculates whether there is extra space on the main axis
- Auto: the default value, the original size of the element
- < length > : This value is a unit of length, which can be set to the same value as the width or height attribute. The element will occupy a fixed space
- Flex: Short for flex-grow, flex-shrink, and flex-basis
- Initial: the default value is 0. 1 Auto
- Auto: The value is 1
- None: The value is 0. 0 Auto
- Align-self: Sets the alignment of the single element itself in the lateral (vertical) direction
- Auto default, element inherits the align-items property from parent, or “stretch” if there is no parent
- Stretch: Elements are stretched to fit the container
- Center: Elements are placed in the center of the container
- Flex-start: Elements are placed at the beginning of the container
- Flex-end: Elements are placed at the end of the container
- Baseline: The element is placed at the baseline of the container