Tag:viewport

  • Configure OpenGL (win10 + vs2019 + glad + glfw) and create your first OpenGL project

    Time:2022-4-28

    Before drawing a good effect, the first thing to do is to create an OpenGL context and an explicit window.Some function libraries have provided such functions, which can provide developers with a window and context to render.Glut, SDL, sfml and glfw are popular. Here we use glfw OpenGL related libraries Introduction to OpenGL related libraries […]

  • What you must know about mobile terminal adaptation

    Time:2022-4-18

    What you must know about mobile terminal adaptation ConardLi ​ Byte runout front end Engineer   260 people approved of the article Reading guide There are many problems that we may encounter in mobile development: 1pxproblem UIFigure perfect fit scheme iPhoneXAdaptation scheme Horizontal screen adaptation High definition screen picture blur problem … We may already […]

  • Based on vue3 + webpack 5 + sass + VW adaptation scheme + Axios packaging, the mobile phone end template scaffold is constructed from 0

    Time:2022-3-11

    Webpack 5 has been officially released for a long time. I found it really fragrant after I started it for some time. The new features of webpack 5 make our configuration more convenient than previous versions, and the construction speed has also made a qualitative leap. This article focuses on the questions encountered in the […]

  • Use CSS viewport to complete responsive layout

    Time:2022-2-8

    Author: Ahmad shadedTranslator: front end XiaozhiSource: Sitepoint Like it and see it again, wechat search【Great Migrations 】, station B pays attention【Front end Xiaozhi】This person has no big factory background, but has an upward positive attitude. this paperGitHub https://github.com/qq44924588…It has been included in the, the articles have been classified, and a lot of my documents and […]

  • VM and VH of CSS3

    Time:2022-1-18

    Here, the adaptive layout units VH and VM in CSS3 are recorded 1. VM: 1vm is equal to 1% of the viewport width. 2. VH: 1vh is equal to 1% of the viewport height. 3. Vmin: select the smallest of VM and VH. 4. Vmax: select the largest VM and VH. Percentage difference between VH […]

  • What is a break point in a bootstrap

    Time:2022-1-12

    Breakpoints are triggers in bootstrap that trigger layout responses to changes in device or viewport size. breakpointIs the cornerstone of responsive design. Use them to control when your layout can fit into a particular viewport or device size. usemedia queryBuild your CSS through breakpoints. Media query is a feature of CSS that allows you to […]

  • Code implementation of waterfall flow

    Time:2021-12-22

    Implementation of waterfall flow Idea: first determine the width of the viewport, then determine the width of each block in the first row, and know how many blocks there are in the first row through both Secondly, push the height of each block in the first row into the ARR array to obtain the distance […]

  • CSS realizes the three column layout in the middle of the bottom of the head

    Time:2021-12-16

    realization 1. Flex layout Flex flexible layout is more flexible to realize various forms of layout. At present, it is widely used in mobile terminal and PC terminal, which is not supported by ie+ 1.1 html <div class=”content”> <div class=”header”>Header</div> <div class=”main”> <div class=”left”>Left</div> <div class=”center”>Center</div> <div class=”right”>Right</div> </div> <div class=”footer”>Footer</div> </div> 1.2 css .content […]

  • Layout of CSS Foundation

    Time:2021-12-15

    CSS layout: float, position, flex, transform, grid,:: After:: before Let’s talk about BFC first Block Formatting Contexts BFC is an independent layout environment, in which the element layout is not affected by the outside world. It is regarded as an isolated independent container. The elements in the container will not affect the outside elements in […]

  • Infinite scroll list

    Time:2021-12-5

    Complexities of an infinite scroller Code example of implementation There are many usage scenarios for infinite scrolling, and some difficulties need to be paid attention to. For example, the links in the footer cannot be accessed because the content keeps pushing the footer away; How do you handle resizing events when the phone changes from […]

  • The summary of mobile terminal H5 development is constantly updated

    Time:2021-11-7

    1、 A code must be added to the mobile terminal development page: <meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no” /> Note: the main meaning of this code is to make the page width equal to the device width and the zoom ratio is 1. Users are not allowed to zoom. Used to detect the viewport. The main effect is […]

  • Try to detect the click delay of the mobile terminal

    Time:2021-9-29

    It is said that the mobile terminal click has a response mechanism with a delay of 300ms to distinguish between click and double click. If you click again within 300ms, it is determined as double-click, and the double-click at the mobile end is used to zoom the page; Otherwise, click and execute the event handler […]