Mobile H5 - Lesson 1 CSS

 

1.移动端开发视窗口的添加

 

h5端开发下面这段话是必须配置的

 

meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

 

其它相关配置内容如下：

 

width viewport 宽度(数值/device-width)

height viewport 高度(数值/device-height)

initial-scale 初始缩放比例

maximum-scale 最大缩放比例

minimum-scale 最小缩放比例

user-scalable 是否允许用户缩放(yes/no)

minimal-ui iOS 7.1 beta 2 中新增属性（注意：iOS8 中已经删除），可以在页面加载时最小化上下状态栏。

 

2.媒体查询的改进

 

之前在做移动端开发的时候，为了适配多屏幕。使用的是rem 单位。这个时候就需要根据屏幕的尺寸来来动态的设置根节点html 的font-size 值。这样可以解决多屏幕适配的问题。

 

比如下面的 媒体查询代码

 

html {

    //iphone5

    font-size: 62.5%;

}

@media (max-width: 414px) {

    html {

        //iphone6+

        font-size: 80.85%;

    }

}

@media (max-width: 375px) {

    html {

        //iphone6

        font-size: 73.24%;

    }

}

 

这样做的结果，有两个很明显的缺点。

 

适配屏幕的尺寸不是连续的。

在自己的 css 文件中添加大段的这样查询代码。增加了 css 文件的体积。

 

后来参考淘宝移动端页面适配规则，使用 js 获取客户端的宽度，根据设计稿的原型动态的计算font-size 的值。

 

详细的内容请看这里 根据iPhone6设计稿动态计算rem值

 

3.a标签内容语义化

 

大多数时候我们都会给一片区域加上点击跳转的功能。如下图：

 

 

 

很可能我们商品区域都是使用的div 标签。很容易我们会给最外层加上一个 a 标签。因为a 是行内元素，是没有宽和高的。不能够把容器撑开。

 

一种解决办法就是给a 标签设置block 属性。如下：

 

 

   

There is no functional problem. But at a semantic level, the above code is non-standard.

The best way is to make the following modifications so that your html code will not be too obtrusive:

4. Set the maximum width and minimum width for your own page

If we use rem units and use js to dynamically calculate the font-size value, we can infinitely adapt to the largest and smallest terminal screens. However, if the user's screen exceeds a certain size and continues to display the h5 page, it will be very unfriendly to the user.

Let’s take a look at the h5 pages of JD.com and Taobao

We have seen that the maximum and minimum width of the page are defined. This allows for a more friendly display when the screen exceeds a certain size (of course this is not necessary).

The maximum width and minimum width I define for my product page are:

{

max-width:640px;

min-width:320px;

}

5. Remove a, the default style of input in mobile browsers

1. Disable a tag background

When using the a tag as a button on the mobile terminal, a "dark" background will appear when you click it. The method to remove the background is as follows

a,button,input,optgroup,select,textarea {

-webkit-tap-highlight-color:rgba(0,0,0,0); /*Remove the blue outer border and gray translucent background when a, input and button are clicked*/

}

2. It is forbidden to long press a, img tag to display the menu bar

When using the a tag, long press on the mobile terminal will display a menu bar. At this time, the method to disable calling out the menu bar is as follows:

a, img {

-webkit-touch-callout: none; /*Disable long press on links and image pop-up menus*/

}

3. Smooth scrolling

body{

-webkit-overflow-scrolling:touch;

}

6.CSS truncate string

Truncate a string in a single line, the width of the string must be specified here

{

/*Specify the width of the string*/

width:300px;

overflow: hidden;

/* When the string exceeds the specified length, the ellipsis character is displayed*/

text-overflow:ellipsis;

white-space: nowrap;

}

7.calc related questions

A serious online bug occurred when using calc when doing layout. Later, I delved into the use of this attribute.

The useful thing about calc is that it can convert between any units. But browser support is not very good. Take a look at the can i use screenshot:

And add the manufacturer prefix when using it to achieve compatibility. However, it is not recommended to use it now. After all, browser support is limited.

Sample code:

#formbox {

width: 130px;

/*Add manufacturer prefix, operators (+, -, *, /) must have spaces on both sides)*/          

width: -moz-calc(100% / 6);

width: -webkit-calc(100% / 6);

width: calc(100% / 6);

border: 1px solid black;

padding: 4px;

}

I have studied the h5 pages of Taobao, Tmall, and JD.com and found that this unit is not used much. It is mainly due to compatibility issues.

8.Usage of box-sizing

Solve the problem of inconsistent performance of box model in different browsers. But there will still be compatibility issues. See the browser support list below.

box-sizing property is used to change the way the default CSS box model calculates the height and width of elements. This attribute is used to simulate the behavior of browsers that do not properly support the standard box model.

It has three attribute values:

content-box default value, standard box model. width and height only include the width and height of the content, not the borders, padding, and margins. Note: Padding, borders & margins are all outside this box. For example. if .box {width: 350px}; and {border: 10px solid black;} then the actual width rendered in the browser will be 370px;

padding-box width and height include padding, but do not include borders and margins.

border-box width 与 height 包括内边距与边框，不包括外边距。这是IE 怪异模式（Quirks mode）使用的 盒模型 。注意：这个时候外边距和边框将会包括在盒子中。比如 .box {width: 350px; border: 10px solid black;} 浏览器渲染出的宽度将是350px.

 

浏览器支持：

 

 

 

9.水平垂直居中的问题

 

可以看之前写定位的一篇文章，末尾有讲到各种定位：【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位)

 

这里实现一个相对定位和绝对定位配合实现水平垂直居中的样式。看效果：

 

 

 

html 代码如下：

 

       

 

The css code is as follows:

.parent-div{

            width: 100px;

Height: 100px;

          background-color:red;

          position:relative;

}

.child-div{

            width: 50px;

Height:50px;

          background-color:#000;

position: absolute;

            margin:auto;

; Top: 0; p

                                                  left:0;

0 Right: 0;

          bottom:0;

}

Absolute positioning can solve many problems in layout in a very square way, but most of the time, absolute positioning is not used, but floating and other methods are used. Absolute positioning is only used when the DOM element needs to be separated from the current document flow. Such as: elastic layer, suspended layer, etc.

10. Problem with line-height in css

A very important use of line-height is to allow our text to be vertically centered in the parent element, but we will also encounter some problems when using it.

Let’s look at an example first, as shown below:

The code is also very simple, that is, when the font we define in the div is large, we see some gaps between the font and the parent element. So why is this?

Let’s check the definition of line-height, as follows:

normal default. Set reasonable line spacing.

number Set a number, which will be multiplied by the current font size to set the line spacing.

length sets fixed line spacing.

% Percent line spacing based on the current font size.

inherit specifies that the value of the line-height attribute should be inherited from the parent element.

So in the above situation, if we want our font to fill our container, we need to add the line-height attribute to the parent container with a value of 100%

The code and effect are as follows:

So why does the above problem occur?

The difference between the calculated values ​​of line-height and font-size (line spacing) is divided into two halves and added to the top and bottom of a text line content respectively.

So, the following formula can be derived:

White space = line-height – font-size

So, when the line-height value is set to 100%, the line-height value is equal to the font-size size, and the white space at this time is 0.

11. Use vertical-align to adjust the icon to be vertically centered

Many times we have to use icons and text together, and both the icon and the text need to be vertically centered. As shown in the picture below:

If you want to achieve vertical centering of text, it is easy, just use line-height=parent container height. But it is more troublesome to center the icon vertically.

Under normal circumstances, our text or adjacent containers should be kept on the same bottom line as the text, as shown below:

You can obviously see that our return icon is not vertically centered. So how should we center the icon vertically?

First of all, let’s figure out the relationship between several lines (the pictures are from the Internet, please inform us if there is any infringement):

In this way we need to use the vertical-align attribute. The most important point is:

Specifies the vertical alignment of inline elements or table-cell elements

baseline: Align the content of an object that supports the valign attribute to the baseline of the parent element

sub: The element baseline is aligned with the subscript baseline of the parent element.

super: The element baseline is aligned with the superscript baseline of the parent element.

top: The top of the element and its descendants are aligned with the top of the entire row.

text-top: The top of the element is aligned with the top of the parent element's font.

middle: The middle line of the element is aligned with the baseline of the parent element.

bottom: The bottom of the element and its descendants are aligned with the bottom of the entire row.

text-bottom: The bottom of the element is aligned with the bottom of the parent element's font.

percentage: Specify the offset from the baseline in percentage. Can be negative. The baseline for percentages is 0%.

length: Use the length value to specify the offset from the baseline. Can be negative. The baseline is 0 for numeric values. (CSS2)

Look at the html below:

       

       

        我就是标题

The initial result is like this

We want to achieve the result as shown below, with the icon centered relative to the font on the right:

At this time we have to use the vertical-align attribute and set its length attribute, that is, set the offset of our icon relative to the text baseline.

When we add attributes it is easy to center both the icon and the text vertically.

{

vertical-align:15px;

}

At this time, our icon and font will be centered relative to the parent element.

12.Use of flex box model

flex is currently not well supported on the PC side (mainly because there are still many IE8 and 9 users.) In most cases, we use flex layout on the mobile side. But even so, there will be many deceptive bugs.

Let’s talk about some basic usage experience, when to use flex.

1.When to use flex attribute

Let’s first look at a product model as shown below

The width of my left product and the right product are the same. When I saw this model, the first thing I thought about was to use flex to make our two-column product list equally divide the screen area. This time it is done using flex.

The parent element is defined as follows

{

margin-bottom: .5rem;

display: box;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

display: -webkit-flex;

-webkit-flex-flow: row;

-ms-flex-flow: row;

flex-flow: row;

}

2.Add manufacturer prefix

When using flex, be sure to remember to add the manufacturer prefix (currently there are three ways to write it: 1, old 2, excessive 3, new). Otherwise there will definitely be compatibility issues.

{

display: -webkit-box;

display: -ms-flexbox;

display: flex;

display: -webkit-flex;

}

3. Flex compatibility with lower version browsers

Look at my code first:

{

box-flex: 1;

-webkit-box-flex: 1;

-webkit-flex: 1;

-ms-flex: 1;

flex: 1;

width: 18.5rem;

}

Here we just let the left and right sides equally divide the width of the screen.

I encountered a problem before using flex on Android 4.3 mobile phones. A normal page should look like the picture below,

But on an Android 4.3 phone, the result is as follows

Later I studied the Tmall page (because I learned from Tmall before using this flex) and saw that when they defined the flex value, they would have such an attribute width=0;

And when I added this attribute to my page, the layout of the page became normal. I can't figure out what I am willing to do now, I can only use it as a hack. If you also encounter this problem, please try adding this attribute. If anyone knows why it is used this way, please enlighten me.

13. CSS3 animation performance issues

I recommend a website to everyone (click here) that can detect whether the css attributes we usually use to change the element style are triggered by the CPU or the GPU. Especially when doing animations, if you use the GPU to render graphics, you can reduce CPU consumption. , improve program performance.

For example, when we make a slider animation to switch the image position, we will use the margin-left attribute. Querying the attribute value through the website will get the following results

As you can see from the above, using margin-left will punish page redrawing and reflowing.

But what impact will it have on the page when we use the new css3 attribute transform instead of the traditional margin-left to change the position of the element? Let’s take a look at the results of the website query first:

From the query results, we can know that using transform will not trigger any redrawing. And it will trigger the gpu to help with page layout. That is, using GPU operations to render animations, reduce CPU consumption and improve performance.

A simple example of css animation, the css code is as follows:

.lottery-animation {

-webkit-animation: lottery-red 2s;

animation: lottery-red 2s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

}

@-webkit-keyframes lottery-red {

from {

-webkit-transform: rotateY(0deg);

transform: rotateY(0deg);

}

to {

-webkit-transform: rotateY(360deg);

transform: rotateY(360deg);

}

}

@keyframes lottery-red {

from {

-webkit-transform: rotateY(0deg);

transform: rotateY(0deg);

}

to {

-webkit-transform: rotateY(360deg);

transform: rotateY(360deg);

}

}

The effect is as shown below:

Here I just added a class="lottery-animation" to the image tag

I have a problem with the software that captures dynamic pictures. The animation of my gif screenshot is a bit stuck and not smooth. There is no problem on a normal machine (if you have any useful gif screenshot software for Mac, you can recommend it to me, thank you!).