End mobile device browser Status:
Domestic UC and QQ, Baidu and other mobile phone browsers are based on Webkit kernel modifications over, there is no domestic independent research and development kernel, compatible mobile end of the main browser process Webkit-browser.
Mobile terminal screen size
Reference: https://www.material.io/resources/devices/
Description: As a front-end development, is not recommended tangle dp, dpi, pt, ppi and other units, using the px can.
Viewport
Viewport (viewport) is the browser display screen area of the page content. Viewport can be divided layout viewport, visual viewport and viewport over
1. layout viewport layout viewport
General mobile device's browser by default set up a layout viewport to address the problem of early PC side of the page displayed on the phone.
iOS, Android will be the basic viewport resolution is set to 980px, so most of the pages on the PC can be presented on the phone, but the elements seem small, - as default you can manually zoom the page.
2. visual viewport visual viewport
Literally, it is an area that the user is seeing the site. Note: is the area of the site.
We can zoom to operate the visual viewport, but will not affect the layout viewport, the layout viewport remains of the original width.
3. ideal viewport ideal viewport
In order to make the site in the end have the best mobile browsing and reading width set
Over the viewport, in terms of equipment, it is the ideal size of the viewport
Please fill in manually viewport meta tag tells the browser operation
The main purpose of the viewport meta tag: width layout viewport width should be consistent with the ideal of the viewport, simple to understand how wide the equipment, we layout viewport on how wide
meta viewport tag
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minium-scale=1.0,maximum-scale=1.0">
Description:
(1) As long as the mobile terminal is adapted to do, this label is added to the page, the page is not the label can be made in accordance with the loaded 980px
(2) the necessary elements:
width = the same device-width set the page size of the viewport and equipment size
user-scalable = no page is provided to the user can not set the zoom
initial-scale = 1.0 Settings page load times magnification of 1
(3) Optional content:
minimum-scale = 1.0 pages minimum reduction rate is set 1.0
maximum-scale = 1.0 maximum magnification setting page 1.0
Twice map
Physical pixel & than physical pixels
Refers to a physical pixel screen display of the smallest particles, it is physically real. This is a vendor at the factory is set up, such as Apple 6 \ 7 \ 8 750 1334 *
Development time we 1px not necessarily mean a physical pixels
PC side page, a physical pixel px is equal to 1, but the mobile terminal will vary
A number of physical pixels can display px, called the physical screen pixels or pixel ratio
For example : iPhone8 physical pixels wide by 750 pixels, 375 pixels in a screen representing actual pixel
PC side and the earlier phone screen / general phone screen: 1CSS physical pixel = 1 pixel
The Retina (retinal screen) is a display technology that will compress more physical pixels to a screen where, to achieve higher resolution, and to improve the degree of detail displayed.
Figure times
For a picture of 50px * 50px, the phone is open Retina screen, the magnification ratio will follow the physical pixel earlier, this will cause a blurry picture
In a standard viewport settings, the use of double graphs to improve picture quality, resolve ambiguities in the definition devices
Usually twice the map, because the impact of iPhone 6 \ 7 \ 8, but now there is a case 3 times 4 times the figure, this look at the actual development needs of the company
Background image Note scaling problems
Twice the figure shows :
- Require a 50 * 50 pixels (css pixel) images directly into our iphone8 which will be a factor of 2 * 100 100 will be blurred
- Take is to put a 100 * 100 images and manually put this picture reduced to 50 * 50 (css pixels)
- Ready pictures twice as large as the size of our actual needs, which way is twice map
Background zoom
background-size: contain; // css3 new
Unit: length | percentage Icover Icontain;
extended to cover the background image is large enough so that the background image is completely cover the background.
expanded to contain the maximum image size, width and height so as to fully adapt the content area
FIG explained fold: @ 3X 3 times in FIG.; @ 2X 2 FIG twice; @ 1X 1 FIG times;
Twice the sprite practice;
In proportion firework inside the sprite and other scaled to half of the original
After the coordinate measurement according to the size
Note that the code which can write background-size: half the width of the original sprite
End mainstream mobile solutions
1. Create separate movement end page (main)
Typically, the URL domain preceded m (mobile) can be moved open end. By determining device, if the mobile device is turned on, the jump movement end page .
For example: Mobile Jingdong Mall, Taobao touch-screen version, Suning Tesco Mobile ...
2. Responsive page compatible mobile terminal (second)
Analyzing the style is changed by the screen width to accommodate different terminal.
For example: Samsung's official website ...
Disadvantages: making trouble , it takes a lot of energy to tune compatibility issues
End mobile technology solutions
1. The mobile client browser
End mobile browser to basic webkit core, hence we consider webkit compatibility issues.
We can rest assured that the use of H5 tags and CSS3 style.
At the same time private prefix our browser we only need to consider adding webkit
2. CSS initialization normalize.css
CSS mobile terminal initialization recommended normalize.css
Normalize.css: protecting valuable defaults
Normalize.css: Fixed bug browser
Normalize.css: modular
Normalize.css: have detailed documentation
Official website address: http://necolas.github.io/normalize.css/
3. CSS3 box model box-sizing
Traditional modes width calculation: width = CSS box set width + border + padding
CSS3 box model: width width = width of the box is provided inside the CSS contains padding and border
In other words, our box model in CSS3, padding and border does not support a big box
| / * CSS3 box model * / box-sizing: border-box; / * Traditional box model * / box-sizing: content-box; |
Traditional or CSS3 box model?
The mobile terminal may all CSS3 box model
If the PC is fully compatible with the need, we will use the traditional model, if you do not consider compatibility, we choose CSS3 box model
4. The special style
| / * CSS3 box model + / box-sizing: border-box; -webkit-box-sizing: border-box; / * We need to click on the highlighted Clear Clear transparent set to complete transparency for iso links and clickable elements * / -webkit-tap-highlight-color: transparent; / * Applied to the mobile-side browser default presentation ios. On this property to buttons and input boxes can be custom style * / -webkit-appearance: none; / Disable a large press pop-up menu at the page * / img,a { -webkit-touch-callout: none;} |
Common mobile terminal layout
Mobile terminal technology selection
Mobile end before we learn the layout and PC end differentiated
1. Create separate movement end page (main)
Fluid layout (layout percentage)
flex elastic layout (highly recommended)
less + rem + media queries layout
Hybrid layout
2. Responsive page compatible mobile terminal (second)
Media Inquiries
bootstrap
Common layouts
1. Fluid layout (layout percentage)
Flow layout, that is, the percentage of layout, also known as non-fixed pixel layout.
Set by the width of the box to be a percentage of the width of the screen expands and contracts in accordance with, the pixel is not fixed limits, the content is filled on both sides.
Flow layout mode mobile web development using the more common layout.
max-width maximum width (max-height maximum height)
min-width minimum width (min-height minimum height)
Provided viewport label and introduced initialization pattern
| <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/index.css"> |
Common initialization style
| body { margin: 0 auto; min-width: 320px; max-width: 640px; background: #fff; font-size: 14px; font-family: -apple-system, Helvetica, sans-serif; line-height: 1.5; color: #666; } |
2. Flex layout
The traditional layout and flex layout
The traditional layout
Compatibility
Cumbersome layout
Limitations, the mobile terminal can no longer nice layout
flex elastic layout
Easy to operate, extremely simple layout, which is widely used mobile end
PC side browser Support for poor
IE11 or earlier are not supported or only partially supported
Suggest:
1. If the PC is the end page layout, we still have the traditional layout.
2. If it is not considered a mobile terminal or PC-side page layout compatibility issues, we make flex elastic layout
Layout principles
1) flex is a flexible Box abbreviation for the "elastic layout" to provide maximum flexibility for box model, any container can be specified as flex layout.
2) When the box is set to flex our parent layout, sub-element float, clear, and vertical-align attribute will fail.
Elastically stretching layout = layout = layout = elastic telescopic cartridge box layout = layout Flex
3) Flex layout elements, called Flex containers (flex container), referred to as "container." It's all child elements automatically become a member of a container, called a Flex project (flex item), referred to as "project."
Summary: flex layout principle: that is, by adding an attribute to the parent flex box, to control the position and arrangement of the sub-box.
常见父项属性
以下由6个属性是对父元素设置的
display: flex; //设置为flex布局
flex-direction :设置主轴的方向
说明：主轴默认x轴，水平向右，侧轴默认y轴，水平向下；主轴和侧轴是变化的，flex-direction设置谁为主轴，剩下的就是侧轴。
属性：row 默认值，从左到右；row-reverse 从右到左；column 从上到下；column- reverse从下到上
justify-content :设置主轴上的子元素排列方式
注意：使用这个属性之前一定要确定好主轴是哪个
属性：
flex-start默认值从头部开始如果主轴是x轴，则从左到右
flex-end从尾部开始排列
center在主轴居中对齐(如果主轴是x轴则水平居中)
space-around平分剩余空间
space-between先两边贴边再平分剩余空间(重要)
flex-wrap :设置子元素是否换行
说明：默认情况下,项目都排在一条线(又称“轴线”). 上。flex-wrap属性定义, flex布局中默认是不换行的。
属性：
nowrap 默认，不换行
wrap 换行
align-items :设置侧轴（默认是在y轴）上的子元素排列方式(单行)
属性：flex-start 默认值 从上到下；flex-end 从下到上；center 挤在一起居中（垂直居中）；stretch 拉伸
align-content :设置侧轴上的子元素的排列方式(多行)
说明：设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行) , 在单行下是没有效果的。
属性值：
flex-start默认值在侧轴的头部开始排列
flex-end在侧轴的尾部开始排列
center在侧轴中间显示
space-around子项在侧轴平分剩余空间
space-between子项在侧轴先分布在两头，再平分剩余空间
stretch 设置子项元素高度平分父元素高度
align-content和align-items区别
align-items适用于单行情况下，只有上对齐、下对齐、 居中和拉伸
align-content适应于换行(多行)的情况下(单行情况下无效)，可以设置上对齐、下对齐、 居中、拉伸以及平均分配剩余空间等属性值。
总结就是单行找align-items多行找align-content
flex-flow :复合属性,相当于同时设置了flex-direction 和flex-wrap
常见子项属性
flex属性定义好项目分配剩余空间,用flex来表示多少份数。
item {
flex: <number>; /* default 0 */
}
align-self控制子项自己在侧轴上的排列方式
说明：align-self属性允许单个项目有与其他项目不-样的对齐方式,可覆盖align-items属性。默认值为auto ,表示继承父元素的align-items属性,如果没有元素,则等同于stretch。
order属性定义项目的排列顺序
说明：数值越小,排列越靠前,默认为0。
注意:和z-index不一样。