• On the specific use of viewport in mobile terminal


    catalogue 1. Basic concepts 1.1 two kinds of pixels 1.2 three viewports 2. Viewport settings 3. Double, double and triple On the PC side, the viewport refers to the visible area of the browser, and its width is consistent with the width of the browser window. In CSS standard documents, viewport is also called initial […]

  • JS + CSS adaptive screen


    Layout adaptation mode Media query: now the mainstream adaptation scheme can write different styles according to different viewports to achieve the adaptation effect. For example, the framework bootstrap can complete most project requirements, but the writing is too complex. Flex layout: the mainstream layout method is not only suitable for mobile web, but also performs […]

  • CSS units


    CSS unit 1. px What is it? The most commonly used unit, absolute unit Usage: .test-box{ font-size: 14px; } Disadvantages: It is a fixed value. Once set, it cannot be changed to adapt to the page size 2. rem: What is it? It is a new relative unit in CSS3. It refers to the unit […]

  • Responsive solutions


    1. Media query and REM Use media query to set the font size of HTML, and additionally use REM to set the font size. VW, VH set the element width and height, and the conversion of REM is PX / font size. <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <meta http-equiv=”X-UA-Compatible” […]

  • Web front end lesson 69 – viewport and REM units


    1. Viewport Viewport is short for view window. The size of the viewport is the actual size of the HTML element. However, if you want to display the actual page size on the mobile terminal, you must adapt the viewport, Otherwise, when the mobile end loads a page, the default viewport width 980px or a […]

  • Meta viewport enables full screen display control of web pages in iPhone


    Helpless, suddenly thought, I often visit Sina touch screen version is how to do? Open opera,Look at the source code and find the meta viewport in the HTML header. Is this guy playing a role?Plus try, sure enough, the screen is full. By the way, I checked the function of this label and recorded it […]

  • Fast layout of CSS viewport unit


    **CSS viewport units * * have appeared in the past few years, and as time goes on, more and more developers begin to use them. The advantage of them is that they provide us with a way to dynamically adjust the size without using J avascript. Moreover, if it fails, there are many alternatives. In […]

  • Analysis of HTML5 meta viewport parameters


    With the popularity of mobile terminal, it is imperative to reconstruct and develop the website on the mobile terminal. However, only after you understand the parameters of the mobile device’s meta viewport can you better adapt or respond to various mobile devices with different resolutions. What is a viewport? Generally speaking, a viewport is the […]

  • Explain how to use REM or viewer for mobile adaptation


    In the development of mobile interface, mobile adaptation has always been a headache. The common mobile port adaptation, REM adaptation, percentage adaptation and so on are common. Here we only introduce the viewport adaptation and REM adaptation. After reading this article, I believe you should be able to operate the mobile terminal for different mobile […]

  • HTML meta viewport property details


    What is viewport Mobile browser is to put the page in a virtual “window”, usually the virtual “window” is wider than the screen, so that each web page does not need to be squeezed into a small window (this will destroy the layout of the web page which is not optimized for mobile browser), users […]

  • Methods of implementing REM layout or VW layout in Vue


    Methods of implementing REM layout or VW layout in Vue 1、 Implement REM layout Mobile end Method 1. Add the following code in index.html or main.js: const setHtmlFontSize = () => { let deviceWidth = document.documentElement.clientWidth || document.body.clientWidth if (deviceWidth >= 750) { deviceWidth = 750 } if (deviceWidth <= 320) { deviceWidth = 320 […]

  • IOS input method pop-up input box positioning disorder


    The pop-up input box will change the height of the viewport. After the pop-up input box, the height will be dynamically matched Here’s how to use JQ $(‘input’).on(‘blur’, function () { setTimeout(function () { var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; window.scrollTo(0, Math.max(scrollHeight – 1, 0)); }, 100); });