Fryao

 Rem-based adaptation scheme What is rem? rem refers to the unit of the font size relative to the root element. In the daily development process, we usually set the font of the root element (html/body) to 10px, which is convenient for us to calculate (at this time, 1rem of the child element is equivalent to 10px) . Applicable scene A web application with an unfixed aspect ratio, suitable for most business scenarios Project combat 1. install dependencies npm i postcss-pxtorem autoprefixer amfe-flexible --save-dev postcss-pxtorem is a plug-in for PostCSS, which is used to generate rem units from pixel units. autoprefixer browser prefix processing plug-in amfe-flexible scalable layout scheme replaces the original lib-flexible and selects viewport compatible with many current browsers 2. Create a postcss.config.js file in the project root directory module .exports = {   plugins : {    autoprefixer : {     o...

 Images can be displayed on web pages by inlining them as <img> elements in HTML, or as CSS background images. In this article, you'll learn how to lazy load both types of images. Embedded image The most common lazy-loaded images are those used in <img> elements. For inline images, we have three lazy-loading options that can be combined for optimal cross-browser compatibility: Use browser-level lazy loading Using Intersection Observer Use browser-level lazy loading Both Chrome and Firefox support lazy loading via the loading attribute. This attribute can be added to the <img> element, or to the <iframe> element. The lazy value tells the browser to load images immediately if they are in the viewport, and fetch additional images as the user scrolls near them. Note that <iframe loading="lazy"> is not yet a standard specification. Although implemented in Chromium, it is not yet standardized and may change in the future. We recommend not lazy load...