1 Mobile page production specifications
1.1 Use of measurement units
CSS unit of measurement selection
- px: fixed pixel value
- em: The font-size setting relative to the parent element is used as the pixel value represented by the current element 1em. For example, the font-size of the parent node: 10px and the font-size of the current node: 1.2em, then the font-size of the current node is actually to 12px
- rem: Relative to the font-size setting of the root node html, it is used as the pixel value represented by the current element 1rem. The difference from em is that the basic measurement unit of rem has nothing to do with the parent node, and is only related to the setting of the font-size of the root node, such as setting 1rem of all nodes in the current dom after html{font-size:10px;} represents 10px
- vm/vh: Indicates the width/height of the viewport. The total width of the viewport is 100vw and the total height is 100vh.
In mobile development, we use rem as the basic unit of measurement, and set the default font size of the root node to font-size:62.5%, because the default font size of the mobile browser is 16px, and 16*62.5% is exactly 10px.
html {
/* 相当于 10px */
font-size: 62.5%;
}
/* #example 的字体大小为 12px*/
#example {
font-size: 1.2rem
}
/* #example 子节点 div 的字体大小为 14px;宽度为 100px;高度 100px */
#example div {
font-size: 1.4rem;
width: 10rem;
height: 10rem
}
<textarea>The content font size of labels under Android does not support rem settings.
1.2 Mobile terminal development details and optimization
Use new CSS3 styles on the mobile terminal instead of the original development habits on PC
- In a layout with a width of 100%, consider using flex layout to achieve automatic expansion and contraction of the width of horizontally side-by-side elements, as well as horizontal and vertical centering, even distribution, and head-to-tail arrangement.
- Vertical centering uses flex to achieve vertical centering
- Try to use border-radius, box-shadow, text-shadow and other CSS3 styles to achieve rounded corners, gradient colors, box projection, font projection, etc., and reduce the use of images.
- For monochrome icons, use font icon import. In this case, you can modify the color, size, background color, special effects (such as projection), etc. of the icon as you like modifying the font, and you no longer need to specify each color. Cut a picture
- Use transform:rotate(90deg) to obtain icons rotated at different angles to avoid the need to cut a picture at each angle.
- In animation, use CSS3 animation properties such as transform:translate(x,y) to change the offset position of elements, and reduce the use of left and top for displacement animation.
2 Image blur processing
Theoretically, one bitmap pixel corresponds to one physical pixel, so that the picture can be displayed perfectly and clearly.
For high-definition screens, one bitmap pixel corresponds to four physical pixels. Since a single bitmap pixel cannot be further divided, the picture looks blurry.
For the problem of image blur, a better solution is to use multiple times of the image (@2x) .
For example: for a 200×300 (CSS pixel) img tag, for a screen with dpr=2, use a 400×600 picture. In this way, the number of pixels in the bitmap is 4 times the original. On a high-definition screen, the number of pixels is 4 times. The number of picture pixels can form a 1:1 ratio with the number of physical pixels, and the picture will naturally be clear.
2.1 Multiple graphs
The function of the multiplex image is to display the image normally and clearly on the mobile terminal.
The reason why it is called multiple images is that different mobile devices have different screen resolutions. For example: double picture, triple picture, quadruple picture, etc. These are multiple pictures. Here we introduce the double chart. The same principle applies to other multiple charts.
2.1.1 Double graph
The difference in clarity between using ordinary pictures directly and using double images. If you directly use the original image and throw it directly to the mobile page, you can clearly see that the edges of the image are jagged.
The picture that is compressed and displayed in the double image mode is much clearer in comparison. This is the effect of multiple times.
The essence of the doubled image is to fill it with an image twice the size of the original position, and still display it with normal clarity after enlarging it.
2.2 SVG vector graphics
Most of the images on web pages are based on pixel processing and will be distorted and blurred when enlarged.
Scalable Vector Graphics (SVG) is an open standard language for describing vector graphics. It is based on XML (Extensible Markup Language). SVG vector graphics are scalable and can be used at any resolution. Print with high quality and can be enlarged without losing image quality.
2.2.1 SVG tags and styles
SVG uses tags to define various graphics. The outer tag is <svg>, viewBox, which can define a rectangular area used to observe the SVG view. Its attributes mainly include x, y, width, and height, which are represented by numbers. Between each number Separated by spaces or commas, it means to define a rectangle at the (x, y) coordinate position of the upper left corner, with width as width and height as height. Commonly used attributes are shown in the table.
| Attributes | illustrate |
|---|---|
| width | Used to control the width of the SVG view |
| height | Used to control the height of the SVG view |
| viewBox | Define the position and size of the user's field of view |
Inside <svg>the tag, you can use some predefined tags provided by SVG to draw graphics or text. Commonly used internal tags are shown in the table.
| tag name | illustrate |
|---|---|
<rect> |
rectangular label |
<circle> |
round label |
<ellipse> |
oval label |
<line> |
Segment label |
<polyline> |
polyline label |
<polygon> |
polygon label |
<path> |
path label |
<text> |
text label |
<tspan> |
Similar <span>, used to <text>set the sample independently internally |
Commonly used internal tags of SVG can also be styled through attributes. Commonly used attributes are shown in the table.
| attribute name | attribute value | illustrate |
|---|---|---|
| fill | String | Define fill color and text color |
| fill-opacity | Floating point number between 0~1 | Define the transparency of the fill color |
| stroke | String | Define the color of the stroke |
| stroke-width | floating point number greater than 0 | Define the width of the stroke |
| stroke-opacity | Floating point number between 0~1 | Defines the transparency of the stroke color |
| opacity | Floating point number between 0~1 | Define the transparency of the entire graphic element |
| transform | translate(x, y) | Pan |
| transform | scale(x, y) | Zoom |
| transform | rotate(angle, [cx, cy]) | rotate |
| transform | skewX(angel) skewY(angel) | tilt |
<!-- 定义一个圆形 -->
<svg width="100%" height="100%">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="#ddd"/>
</svg>
<!-- 定义一个外部svg -->
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="#ddd" />
</svg>
3 practice assignments
- Use multiple images to solve the blur problem of mobile images.
- Use SVG to introduce vector graphics.