• An adaptive and easy-to-use CSS


    Mainly using CSS max-width:min-content The following code shows <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title> <style> .box{ width: 100px; } .boxMain{ display: flex; justify-content: space-between; padding: 2px 8px; border: 1px solid #ccc; background-color: aqua; overflow: hidden; color: #fff; width: 100%; max-width: min-content; } .l{ max-width: min-content; /*Overflow is displayed with […]

  • CSS picture display incomplete floating invalid solution


    Incomplete picture display Use CSS to reference pictures. The pictures are too large to be fully displayed in the box. Only some can be displayedThere is still no change through other operations, as shown in the figure:SolutionAfter referencing the picture in CSS style settings, set the width and height to 100% respectively, and the box […]

  • Canvas font auto wrap line thickness to solve 1px line blur problem


    Ctx.filltext automatically replace rows <!DOCTYPE HTML> <html> <head> <meta charset=”UTF-8″> <title>fillText Auto-wrap</title> </head> <body> < canvas id = “mycanvas” > your browser does not support canvas</ canvas> <br> < textarea id = “input” row = “6” col = “60” style = “width: 300px; height: 100px;” > auto wrap text auto wrap text auto wrap text […]

  • Matplotlib quilver draw wind speed and direction


    Composition of an arrow Understanding of several parameters of quilver Quiver ([x, y], u, V, [C], * * kW), where kW can be selected from: Units: the default value is width. Width / height: the width of the arrow is the total length of the X or Y axis. Yes, it is the total length; […]

  • Bootstrap learning environment installation


    1、<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> Let ie run the latest rendering mode. 2、<meta name=”viewport” content=”width=device-width, initial-scale=1″> Initialize mobile browsing display. width=device-width: make the width equal to the width of the device. initial-scale=1: set the initial scale to 1, i.e. no scaling. 3、 <!–[if lt IE 9]> <script></script> <script></script> <![endif]–> (1)<script></script> Ie version is lower than IE9, so […]

  • Vue item drag to modify the left and right width


    Requirements: drag to change the left and right widthEffect achieved: Implementation steps:1. Code <div class=”box” ref=”box”> < div class =’left ‘> left < / div > <div class=”resize”> ⋮ </div> < div class =’right ‘> right < / div > </div> 2. Style .left { width: 49.2%; height:100%; overflow-y:auto; overflow-x:hidden; float: left; } .resize { […]

  • Learning notes of mobile terminal adaptation scheme based on VW unit V2


    Reference articles Mobile front end adaptive solutions and comparison Length in CSS IOS adaptability and layout Briefly describe the requirements: the first is the traditional mobile terminal adaptation, that is, whether it is a large screen or a small screen mobile phone, the layout should be the same, but it should be scaled proportionally according […]

  • Explore the implementation of CSS with single line text centered and multi line text left


    Original linkhttps://github.com/XboxYan/notes/issues/13 long ago Just entering the front-end meeting, the product manager put forward such a demand Can this text be judged in this way? When the text is less than one line, let it be displayed in the middle. When the text exceeds one line, let it be left. Otherwise, it is strange to […]

  • Adaptation of WebView to client


    Started at:My blog preface There are often problems in our app that there will be a lot of blank space at the bottom of the displayed web page, and the speed of displaying the web page will take a second or more. Width acquisition problem The problem with IOS and Android is that there is […]

  • Bao, learn the aspect ratio in CSS and let H5 development miss you more!


    Author: Ahmad shadeTranslator: front end XiaozhiSource: shaded Dream, dry goods, wechat search[move to the world]Pay attention to this dish washing wisdom who is still washing dishes in the early morning. This article GitHub https://github.com/qq449245884/xiaozhi It has been included. There are complete test sites, materials and my series of articles for the interview of front-line large […]

  • CSS: grid layout


    Grid container By setting the value of the attribute display to grid, the HTML element becomes a grid container, which can use the attributes related to CSS grid.For example: <div class=”container”> < div class = “Item1” > grid 1 < / div > < div class = “Item2” > grid 2 < / div > […]

  • Bootstrap Learning Grid System


    1. Implementation principle The implementation principle of the grid system is very simple. It just makes a powerful responsive grid system by defining the container size, bisecting 12 copies (there are also 24 or 32 copies, but 12 copies are the most common), adjusting the internal and external margins, and finally combining media query. The […]