current position:Home>Talk about mobile terminal adaptation
Talk about mobile terminal adaptation
2021-08-27 04:40:39 【_ Battle】
This is my participation 8 The fourth of the yuegengwen challenge 17 God , Check out the activity details :8 Yuegengwen challenge
One 、 introduction
There are two starting points for users to choose a large screen , Some people want bigger Fonts , Bigger picture ; Some people want more content , I don't want a bigger icon ; Some people want a mirror ….
Fully understand various equipment , We will know that screens of different sizes have their own positioning , image ipad Compared with the large screen device itself iphone5 Should have a greater vision , Instead of rudely letting users feel the experience of the elderly machine .
However, due to the shortage of design and development resources , At this stage, only one set of design draft can be applied to multi-size equipment , Therefore, we need to consider how to make the display more reasonable while maintaining a set of design draft .
Two 、 Basic unit
For mobile development , In order to achieve the effect of high-definition page , The specification of visual manuscript often follows the following two points :
- First , Select a phone's screen width and height as the benchmark ( It used to be iphone4 Of 320×480, Now more is iphone6 Of 375×667).
- about retina The screen ( Such as : dpr=2), In order to achieve HD effect , The canvas size of the visual manuscript will be benchmark 2 times , That is to say, the number of pixels is original 4 times ( Yes iphone6 for : The original 375×667, Will become 750×1334).
Physical pixel (physical pixel)
A physical pixel is a display ( Mobile phone screen ) The smallest physical display unit , Under operating system scheduling , Each device pixel has its own color value and brightness value .
Device independent pixel (density-independent pixel)
Device independent pixel ( Also called density independent pixels ), It can be regarded as a point in the computer coordinate system , This point represents a virtual pixel that can be used by the program ( such as : css Pixels ), And then it's transformed into physical pixels by related systems .
So , There is a certain correspondence between physical pixels and device independent pixels , That's what we're going to talk about next .
DPR Device pixel ratio (device pixel ratio )
Device pixel ratio = Physical pixel / Device independent pixel ; // In a certain direction ,x Direction or y Direction Can be in JS in window.devicePixelRatio Get the... Of the current device dpr
3、 ... and 、 Common layout types
rem Layout
principle : According to the screen size of the phone and dpr, Dynamic modification html The benchmark value of (font-size)
The formula : rem = document.documentElement.clientWidth * dpr / 100
notes : multiply dpr, It's because it's possible for a page to 1px border The page zooms (scale) 1/dpr times ( without ,dpr=1)
Suppose we divide the screen width into 100 Share , The width of each portion is in per Express ,per = Screen width / 100, If you will per As a unit ,per The previous value represents the percentage of screen width
p {width: 50per;} /* Screen width 50% */
Copy code
If you want page elements to change proportionally with the screen width , We need the above per Company , If the child element is set rem Properties of units , By changing html Font size of element , You can change the actual size of the child element
html {font-size: 16px}
p {width: 2rem} /* 32px*/
html {font-size: 32px}
p {width: 2rem} /*64px*/
Copy code
If you allow html The size of the element font , Equal to the width of the screen 1/100, that 1rem and 1per It's equivalent.
html {fons-size: Element width / 100}
p {width: 50rem} /* 50rem = 50per = Screen width 50% */
Copy code
The practical application
rem When acting on non root elements , Relative to the root element font size ;rem When applied to the root element font size , Relative to its initial font size
It can be seen that rem The values can be divided into two cases , Set on root and non root elements , for instance :
/* Act on the root element , Relative to the original size (16px), therefore html Of font-size by 32px*/
html {font-size: 2rem}
/* Acting on non root elements , Relative to the root element font size , So for 64px */
p {font-size: 2rem}
Copy code
for instance :
Design width | Element width in design |
---|---|
320px | 50px |
480px | 75px |
640px | 100px |
The proportion of elements in the design draft :100 / 640 = 75 / 480 = 50 / 320 = 15.625
The following table shows the calculated values of elements under different screen widths
Page width | html font size (1rem) | p Element width |
---|---|---|
320px | 320/100=3.2px | 15.625*3.2=50px |
480px | 480/100=4.8px | 15.625*4.8=75px |
640px | 640/100=6.4px | 15.625*6.4=100px |
Used in development px Development , The project in css Prior to entry into force px All converted to rem.
vw
vw/vh
Is based on Viewport A unit of window length window.innerWidth
/window.innerHeight
stay CSS Values and Units Module Level 3 neutralization Viewport There are four related units , Respectively vw
、vh
、vmin
and vmax
.
- vw: yes Viewport’s width Abbreviation , 1vw be equal to window.innerWidth Of 1%
- vh: and vw similar , yes Viewport’s height Abbreviation ,1vh be equal to window.innerHeihgt Of 1%\
- vmin:vmin The value of is current vw and vh The smaller value in
- vmax:vmax The value of is current vw and vh The greater of
You can see vw In fact, it is realized 1vw = 1per, Compared with rem Need to compute html The benchmark value of ,vw Undoubtedly more convenient .
/* rem programme */
html {fons-size: width / 100}
p {width: 15.625rem}
/* vw programme */
p {width: 15.625vw}
Copy code
Q:vw So convenient , Is it better than rem Better , Can completely replace rem What about it ?
A: Of course not. .
vw There are also shortcomings. .
- vw Conversion is sometimes inaccurate , Smaller pixels don't fit well , Just as we can accurately represent a larger value with a smaller value , If a larger value is used to represent a smaller value, there may be problems such as digit conversion, which cannot be accurately expressed .
- vw The compatibility is not as good as rem
- When using elastic layout ,vw Cannot limit maximum width .rem By controlling HTML At baseline , To achieve the maximum width limit .
Q:rem Is it so perfect ?
A:rem It's not everything
- rem The production cost is greater , Additional plug-ins are needed to implement .
- Font cannot be used rem, There is no linear relationship between font size and font width , All font sizes cannot be used rem, Because the font size of the root element is set , It will affect all elements without font , Therefore, you need to set all the elements that need font control .
- In terms of user experience , The comfort of text reading has nothing to do with the size of the media .
Four 、 Adaptation scheme
Scheme 1 : rem/vw
Applicable scenario :
- There are many kinds of visual components , Visual design depends on the relative relationship of element position, which is a strong mobile page :vw/rem
Example :
- Are you hungry (h5.ele.me/msite/)
- Yes viewport Scaled
- html Elemental font-size Still by px Appoint
- Use... On the layout of specific elements vw + rem fallbak In the form of
- There is no limit to the layout width
- css The build process requires plug-in support
Option two : flex + px + percentage
Applicable scenario :
- The pursuit of reading experience , Such as the list page .
Example :
- You know (www.zhihu.com/)
- The pursuit of reading experience , Use px Layout .
- tencent (xw.qq.com/)
- The main content of the home page is news , For a better reading experience , Use px Layout .
Like to support 、 Fragrance in hand 、 And glory , Use your little hand to get rich , Thank you for leaving your footprints .
Good recommendations from the past
Front end Performance Optimization Practice
Talk about troublesome regular expressions
get files blob The stream address realizes the download function
Git Related to recommend
Easy to understand Git introduction
Interview related recommendations
The front-end ten thousand words face is —— The basic chapter
Front end 10000 word area —— Advanced
See... For more highlights : Personal home page
copyright notice
author[_ Battle],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827044035737V.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
- Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
guess what you like
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
-
Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
-
Introduction to flex flexible layout in CSS -- learning notes
Random recommended
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich