1. Some concepts of the mobile terminal
5. The relationship between pixels
(3), picture high-definition display
The viewport is the screen area where the browser displays the content of the page
(6) The concept of multiple graphs
(VII) Mobile terminal products running on mobile devices
Asymptotic enhancement of basic needs ==> better experience
Graceful downgrade Complete functions ==> backward compatibility
Mobile-first responsive layouts using the principles of progressive enhancement
2. Choice of mobile terminal development
(1) Mainstream adaptation solutions for mobile terminals
1. Create a mobile page separately
2. Responsive pages are compatible with mobile terminals
(2) Several points for attention in mobile terminal development
3. Common implementation methods on the mobile terminal
(1) Technology selection of mobile terminals
1. Create a mobile page separately
keywords and not only to connect
Media properties (must have parentheses)
(4), flexible.js implementation
foreword
1. Some concepts of the mobile terminal
(1) Screen related
1. Screen size:
Refers to the diagonal length of the screen, in inches. Commonly used sizes are: 3.5mm, 4.7mm, 5.0mm, 5.5mm, 6.0mm, etc. Remarks: 1 inch (inch) = 2.54 centimeters (cm)
2. Screen resolution
Refers to the total number of physical pixels of the screen in the horizontal and vertical directions, generally represented by n * m. For example: the screen resolution of iPhone6 is 750 * 1334
Note: The screen resolution is a fixed value, which is determined after the screen is produced and cannot be modified
Screen resolution and display resolution are two concepts. What can be modified in the system settings is the display resolution
Display resolution is the physical pixels currently used by the device, it can also be said: screen resolution >= display resolution
3. Screen density (ppi)
Also known as screen pixel density, it refers to the number of physical pixels per inch on the screen, and the unit is: ppi (pixels per inch). The ppi value is the core indicator to really measure whether a screen is clear or not.
The calculation method of PPI is: PPI = square root (X*X+Y*Y)/Z (where X, Y refer to the number of pixels in length and width, and Z refers to the screen size). For example, the resolution of iphone4s is 640*960, and the screen size is 3.5 inches. Its PPI=KS(960*960+640*640)/3.5=329.650
(2), pixel correlation
2. css pixels
Also called: logical pixel, css pixel is an abstract unit of length, the unit is also px, it is created for web developers to accurately measure the size of the content on the web page, we are writing css, js and less are all css pixels (can be understood as: 'programmer pixels') Thinking: the ratio of css pixels in the code to physical pixels? The two of them were the same before 2010 and not after
3. Device independent pixels
Device Independent Pixel is referred to as DIP or DP, also known as Screen Density Independent Pixel
Introduction: In the era when there were no high-definition screens, one css pixel corresponds to one physical pixel, but since the advent of high-definition screens, the relationship between the two is no longer 1:1
Apple introduced a new display standard in 2010: on the premise that the screen size remains unchanged, more physical pixels are compressed into one screen, so that the resolution will be higher and the display effect will be better. Delicate, Apple calls this screen: Retina screen (retina screen), and at the same time launched an epoch-making product equipped with this screen - the appearance of independent pixels in iPhone4 equipment, making even under the [high-definition screen], such as Apple The retina screen can also make the elements have a normal size, so that the code will not be affected by the device. It is set by the device manufacturer according to the screen characteristics and cannot be changed.
The relationship between device independent pixels and physical pixels 1 device independent pixel corresponds to 1 physical pixel under normal screen
One device independent pixel corresponds to N physical pixels under the high-definition screen
The relationship between device-independent pixels and css pixels cannot be scaled (standard conditions): 1 css pixel = 1 device-independent pixel, that is: dpr=physical pixel/device-independent pixel
4. Pixel ratio
Pixel ratio (dpr): the ratio of [physical pixel] and [device independent pixel] of a single-directional device
5. The relationship between pixels
Without scaling (ideally):
Ordinary screen (dpr=1): 1 css pixel = 1 device independent pixel = 1 physical pixel
HD screen (dpr=2): 1 css pixel = 1 device independent pixel = 2 physical pixels
HD screen (dpr=3): 1 css pixel = 1 device independent pixel = 3 physical pixels The programmer wrote a box with a width of 100px,
Then: represents 100 css pixels; if the user does not zoom, it corresponds to 100 device-independent pixels;
On a device with a dpr of 2, these 100 css pixels occupy 100*2=200 physical pixels (horizontal)
For example: iPhone6 as an example physical pixel: 750px, device independent pixel 375px, css pixel: 375px
(3), picture high-definition display
1. Bitmap pixels
Bitmap: also known as bitmap image or Shange image, which is composed of n pixels. Distortion occurs when zoomed in. (common: png, jpeg, jpg, gif)
General use: PS and other software for editing
A bitmap pixel is also a unit of length, and a bitmap pixel can be understood as a 'small grid' in a bitmap, which is the smallest unit of a bitmap
(4) Viewport concept
The viewport is the screen area where the browser displays the content of the page
PC-side viewport: On the PC side, the default width of the viewport is the same as the width of the browser window. In the css standard document, the PC-side viewport is also called: initial containing block.
Mobile viewport: The mobile viewport can be divided into layout viewport, visual viewport, ideal viewport (perfect viewport) standard
1. Layout viewport: The default layout viewport container is 980px. Compress the pc page to the same size as the mobile phone, and you can see it, but the elements look very small and can only be manually removed Zoom, the experience effect is not good
2. Visual viewport: The visual viewport is the area visible to the user. Its absolute width is always as wide as the device screen, but the css pixel values contained in this width vary. For example: a general mobile phone uses 980 css pixels into the visual viewport
Note: After the layout viewport is compressed, the horizontal width is expressed in CSS pixels, which is no longer 375px, but 980px
(5), meta tag settings
<!-- 设置完美视⼝⼤⼩
2 device-width 视⼝宽度和设备保持⼀致
3 initial-scale 表示⻚⾯的初始缩放值，==>屏幕宽度（设备独⽴像素）/布局视⼝宽度
4 user-scalable 是否允许⽤户缩放
5 maxinum-scale=1.0, 最⼤允许缩放⽐例
6 mininum-scale=1.0， 最⼩允许缩放⽐例
7 -->
8 <meta name="viewport"
9 content="width=device-width,
10 initial-scale=1.0,
11 user-scalable=no
12 maxinum-scale=1.0,
13 mininum-scale=1.0 " />(6) The concept of multiple graphs
We already know that on the mobile side, 1 css pixel == multiple physical pixels, so what impact does it have on development? Question: Images also have a concept of resolution. Does the resolution refer to physical pixels or px pixels? Image resolution: refers to how many physical pixels (light-emitting dots) the image needs to display in the horizontal and vertical directions
Double image: 100*100 image is used. 100*100 resolution image == "corresponding to 100*100 luminous point (physical pixel) on the screen ==" corresponding to 50*50px in css Set 100*100px, it is obviously blurred in comparison
Double image uses 200*200 image 200*200 resolution image == "Corresponding screen 200*200 luminous point (physical pixel) ==" 100*100px in css At this time, set it to 100*100px, Exactly corresponds perfectly to the display
Conclusion: In the current mobile terminal, for example: in iphone6, how many px images need to be displayed, in order not to be forcibly enlarged, it is necessary to use images with a width and height of 2 and a resolution to display better results. And this kind of image whose width and height are twice the size of the resolution is called a 2x image. In the actual development process, there are still 2x images, 3x images, and 4x images, but the specific use Which one depends on the specific needs of the company
Naming features:
Double image [email protected]
Triple Figure [email protected]
In actual development, if you are given a 1-fold image, write as much as you want; if it is a 2-fold image, it is the size of the image/2; for a 3-fold image, it is the size of the image/3·· ····;
(VII) Mobile terminal products running on mobile devices
Mobile device: mobile phone, tablet ipad
Most of the products we will make in the future only need to be adapted to the ios system and the Android system
Responsive: It can give users the best experience on different devices
Responsive development: With the rise of the mobile Internet, the resolutions of different devices vary greatly. If the same page is displayed on different devices, the user experience will be poor.
Responsive page design is a way to make a website compatible with multiple terminals without making a specific version for each terminal. It enables a website to be easily browsed and used on any type of screen, and adopts a responsive design. In different devices, the website will be rearranged to display different design styles for perfect adaptation Any size screen
Responsive Design Principles:
Asymptotic enhancement of basic needs ==> better experience
Graceful downgrade Complete functions ==> backward compatibility
Mobile-first responsive layouts using the principles of progressive enhancement
2. Choice of mobile terminal development
Due to the different screen sizes of mobile devices, it may appear that the same element has different display effects (different proportions) on two different mobile phones. If you want the same element to display the same effect on different devices, you need to adapt it. No matter what kind of adaptation method is used, the central principle is always equal
(1) Mainstream adaptation solutions for mobile terminals
1. Create a mobile page separately
In order to display the best visual effect on specific devices, most mobile products have two different websites for PC and mobile.
Its technical implementation is usually: the server judges the device type according to the user-agent requested by the browser, and then returns (or redirects) the corresponding site content.
2. Responsive pages are compatible with mobile terminals
It is common in scenarios where multiple terminals such as PCs and mobiles share a set of codes, such as the bootstrap site and the official website of Samsung mobile phones. Change the style by judging the screen width to adapt to different terminals. Disadvantages: production is troublesome and requires a lot of energy To adjust compatibility issues
(2) Several points for attention in mobile terminal development
1. To remove the default style, you can use normalize.css
2. The box model adopts the attribute of box-sizing and the attribute value of border-box
3. The highlight background effect of hyperlink click needs to be removed
-webkit-tap-highlight-color:transparent3. Common implementation methods on the mobile terminal
(1) Technology selection of mobile terminals
1. Create a mobile page separately
1> Flow layout.
It is a percentage layout, also known as a non-fixed pixel layout
Set the width of the box to a percentage to scale according to the width of the screen, not limited by fixed pixels, the content is filled to both sides, mainly to set the width
Generally used with the following attributes to prevent the elements in the box from being squeezed out
max-width maximum width (max-height maximum height)
min-width minimum width (min-height minimum height)
2>, flex elastic layout
3>, rem+ media query layout
(1), rem unit: relative unit, relative to the font size of the html root element, by changing the size of the html text, the size of the page can be changed
(2), media query (meidia Query):
effect:
Using @media query, you can define different styles for different media types
@media can set different styles for different screen sizes
When resizing the browser, the page will also re-render the page according to the width and height of the browser
grammar:
@media media type keyword (media attribute) {css}
Media type (Multiple media types can be used at the same time, separated by commas, so that there is an OR relationship between them)
all all devices
print print device or print preview
screen A device with a screen (computer, mobile phone)
speech screen reader
keywords and not only to connect
Concatenate a media type or multiple media attributes together as a condition for a media query
and: Multiple media features can be connected together, which is equivalent to and
not: Exclude a certain media type, which is equivalent to "not", and can be omitted
only: specify a specific media type, which can be omitted
Media properties (must have parentheses)
width The visible width of the page max-width The maximum width of the viewport (it will take effect when the viewport is smaller than the specified width, less than or equal to xxxpx)
min-width The minimum width of the viewport (it will take effect when the viewport is larger than the specified width)
max-height maximum height min-height minimum height orientation:landscape landscape orientation:portrait portrait
<style>
2 body {
3 background-color: red;
4 }
5 /* 第⼀种⽅式 直接引⼊ */
6 /* 在992px-768px之间设置的样式 */
按照设计稿与设备宽度的⽐例，动态计算并设置html根标签的font-size⼤⼩（媒体查询）
css中，设计稿元素的宽、⾼、相对位置等取值，按照同等⽐例换算为rem为单位的值
根字体=（⼿机横向设备独⽴像素值）/10 例如：iPhone6，根字体=375/10=37.5px 以rem为单位，
即1rem=37.5px
如果设计稿是375px 例如：iPhone6，根字体=375/10=37.5px 以rem为单位，即1rem=37.5px
⻚⾯中数值为：设计值/（设计稿宽度/10） 例如：100px/（375px/10）=2.667rem
⼿机横向设备独⽴像素值，可以⽤flexible.js计算，⽤⾥⾯的js去做处理
css元素的设计值换算⽤css中的Cssrem: Root Font Size去实现 px to rem & rpx & vw (cssrem)
只要确定当前html⽂字⼤⼩就可以了.
7 @media screen and (max-width: 992px) and (min-width: 768px) {
8 body {
9 background-color: orange;
10 }
11 }
12 /* 可以简写，默认写了screen and */
13 @media (max-width: 768px) {
14 body {
15 background-color: yellowgreen;
16 }
17 }
18 </style>
<!-- 第⼆种⽅式：外接式，针对不同的界⾯效果，可以写不同的样式，分别引⼊，写的时候，最好从⼩
到⼤来写
19
20 语法：media="媒体类型 关键字 (媒体特性)
21 -->
<link rel="stylesheet" href="./600.css" media="screen and (max-width:
600px) " />
(3), rem adaptation scheme
According to the ratio of the design draft to the width of the device, dynamically calculate and set the font-size of the html root tag (media query) In css, the values of the width, height, and relative position of the design draft elements are converted into Value in unit of rem root font = (independent pixel value of mobile phone landscape device) / 10 For example: iPhone6, root font = 375/10 = 37.5px in unit of rem, that is, 1rem = 37.5px
(4), flexible.js implementation
download link:
github address: https://github.com/amfe/lib-flexible
Official document address: https://github.com/amfe/article/issues/17
Plug-ins used together (directly installed in vscode)
px to rem & rpx & vw (cssrem)
Cssrem: Root Font Size
基准font-size（单位：`px`）, default: 16,调整成75
例如主流设计稿⼤⼩为750px，主要将html⽂字的⼤⼩设置为75px，⾥⾯⻚⾯元素rem值：⻚⾯元素的px
值/75，从⽽算出rem值
4>, mixed layout (mainstream)
To sum up all of the above, use them together, select a main technology selection, and other technologies as auxiliary (recommended)
Steps of mobile development
Step 1: How big is the design draft, and change the root font size to: the size of the design draft/10
Step 2: Introduce flexable.js to dynamically modify the font size of html Step 3: Normally develop according to the size of the design draft, and convert all px values into rem values
5>, vw, vh (future trend)
vw is also a percentage, but this percentage only refers to the device viewport
vw (Viewport's width): 1vw is equal to 1% of the viewport width
vh (Viewport's height): 1vh is equal to 1% of the viewport's height
vmin: the smaller value of vw and vh vmax: choose the maximum value of vw and vh
Summarize:
Although it is still a vw layout, it is still written in rem
1. It has nothing to do with the size of the screen. Anyway, 100vw is 100% of the screen. Use the screen size as a fixed value to convert the relative unit
2. Customize a conversion ratio between rem and px. For easy calculation, it is generally 1rem=100px, and calculate the relationship between vw and rem, px. For example, the design draft of 750: 1font-size=100px=1rem =13.3333vw
3. All sizes on the 750 design draft are calculated in rem. For example, a box of 200px*200px is a box of 2rem*2rem, which is a box of 26.666vw*26.666vw.
Use vw to develop
1. Look at the size of the design draft, customize 1rem=100px, then 1px=xxxvw, set html{font-size:xxxvw}
2. To change the root font size, change 1rem=100px
3. Normally write the px value as rem
Summary: They are all absolute values for reference. flexable.js uses the independent pixel of the device as the absolute value. To calculate the value of rem, vw is the width of the viewport of the device as the absolute value. To calculate the value of rem, the final value is The px in the design draft is converted to rem
bootstarp framework: https://www.bootcss.com/
Summarize
This article summarizes some concepts of the mobile terminal, several points for attention in mobile terminal development, and several common implementation methods of the mobile terminal. If the writing is not good, please give me more advice. Finally, I wish you in front of the screen a happy life and everything Ruyi~~~