Fryao

 Why modify node_modules? In normal development, it is rarely necessary to change the code in node_modules, but there are many cases that need to be modified. For example, I encountered a scene last time, I used a middleware package for interface forwarding, but I encountered a problem: this package limits the uploaded file format But in fact, I want to let go of uploading all file formats, so I am forced to modify the code of this package in node_modules and let go of its restrictions, so as to achieve the effect I want, so how should I change it? This is a problem The first method: direct change This is easy to understand, just go directly to node_modules, find the code of that package, modify the code in the corresponding place, and then restart the project to achieve the effect I want. But in fact, this approach has too many disadvantages! 1. You can only use the code you modified locally, and your colleagues cannot use it 2. After the next npm i, the code of the package will b...

 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...