菜单

运动端 h5开发有关内容总结——CSS篇

2018年11月15日 - CSS/CSS3

3.a签内容语义化

大部时段我们都见面被一样切开区域丰富点击跳转的成效。如下图:

图片 1

挺可能咱们商品区域还是动的div 标签。很易我们见面给最外层加上一个 a
标签。因为a 是行内元素,是未曾宽裕和强之。不克管容器撑起来。
一样种植解决办法就是吃a 标签设置block 属性。如下:

XHTML

<style> a{display:block;} </style> <a>
<div></div> </a>

1
2
3
4
5
6
7
<style>
    a{display:block;}
</style>
 
<a>
    <div></div>
</a>

作用及既远非问题。但是当语义化的圈达到,上面的代码是匪正规的。

最好好之做法即是开如下的改,这样非会见使自己的 html 代码显的无限出人意料:

XHTML

<style> a{display:block;} span{dispaly:block;} </style>
<a> <span></span> <span></span>
<span></span> </a>

1
2
3
4
5
6
7
8
9
10
<style>
a{display:block;}
span{dispaly:block;}
</style>
 
<a>
    <span></span>
    <span></span>
    <span></span>
</a>

动端 h5开发相关内容总结——CSS篇

2.禁绝添加准 a,img 标签长按出现菜单栏

使用 a标签的时段,移动端长论会冒出一个
菜单栏,这个时节禁止呼出菜单栏的办法如下:

CSS

a, img { -webkit-touch-callout: none; /*禁添加准链接和图片弹有菜谱*/ }

1
2
3
a, img {
    -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
}

 

1.不准 a 标签背景

在倒端应用
a标签做按钮的下,点按会起一个“暗色”的背景,去丢该背景的计如下

CSS

a,button,input,optgroup,select,textarea {
-webkit-tap-highlight-color:rgba(0,0,0,0);
/*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/ }

1
2
3
a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
}

1.移动端开发视窗口的长

h5端开发下面就段话是须配备的

XHTML

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

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

任何有关安排内容如下:

13.CSS3动画性能的题材

叫大家推荐一个网站(点击这里)可以检测我们平常利用的
css 属性改变元素样式的早晚,触发的是 cpu还是 gpu
,特别是在做动画的时光,如果采取 gpu 渲染图形,可以减小 cpu
的消耗,提高程序的习性。

仍我们举行一个 slider
动画切换图片位置的时段,会使用margin-left的性,通过网站查询该属性值得到如下的结果

图片 2

出于臻可解用margin-left 的当儿会重罚页面的重绘和重排。

可当我们应用css3初特性transform 来代替传统的 margin-left
来改变元素位置的时候针对页面有什么影响呢?先来拘禁下网站查询的结果:

图片 3

出于询问结果好了解,使用transform 不见面接触任何的重绘。而且会触发 gpu
来助页面的排版。即使用GPU操作渲染动画,减少cpu的损耗,提高性能。

css动画简单实例,css代码如下:

CSS

.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); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.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);
    }
}

效益使下图:

图片 4

此间我只是对图像标签上加了一个 class="lottery-animation"

自我截取动态图片软件的题材,我之这gif
截图动画有头卡顿,不流利。在常规机器及是绝非问题之
(如果大家发出mac下好用的
gif截图软件可以推荐给自身,谢谢!)。

有关 css3 动画性能优化引进阅读文章:
1.前者性能优化的又平整的动画(更新)
2.CSS3硬件加速也生坑!!!


假设你觉得是,请看
github(点我)
地址给自家同样颗星。谢谢啊!

打赏支持自勾勒来双重多好文章,谢谢!

打赏作者

6.CSS 截断字符串

单行截断字符串,这里要指定字符串的幅度

CSS

{ /*指定字符串的肥瘦*/ width:300px; overflow: hidden; /*
当字符串超过规定长度,显示省略符*/ text-overflow:ellipsis; white-space:
nowrap; }

1
2
3
4
5
6
7
8
{
    /*指定字符串的宽度*/
    width:300px;  
    overflow: hidden;  
    /* 当字符串超过规定长度,显示省略符*/
    text-overflow:ellipsis;  
    white-space: nowrap;  
}

关于作者:zhiqiang21

图片 5

召开看针对的政工,如果可能是蹭的,那就举行看好接受得起底业务!

个人主页 ·
我的篇章 ·
11 ·
     

图片 6

1.哟时用 flex 属性

先来拘禁一个产品模型如下图

图片 7

我的左手商品以及右侧商品之大幅度是同样的。当自己望这个模型的早晚,第一起就是眷恋就是是用
flex 让咱片排商品列表平分屏幕区域。这个时候就用flex 来做。
父级元素如下概念

CSS

{ 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; }

1
2
3
4
5
6
7
8
9
10
11
{  
    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;
}

打赏支持自勾勒来更多好章,谢谢!

任选一种出办法

图片 8
图片 9

4 赞 36 收藏 1
评论

12.flex 弹性盒模型的使用

flex 现在 pc 端支持的不得了(主要是以还有众多
IE8,9的用户存在。)大多情况下我们且是于倒端采用flex布局。但是就到底这样,也会见生很多坑人之
bug出现。
讨论一些着力的使更吧,什么时使用 flex 。

3.通滚动

CSS

body{ -webkit-overflow-scrolling:touch; }

1
2
3
body{
    -webkit-overflow-scrolling:touch;
}

2.媒体询问的改善

事先在开活动端支出之时段,为了适配多屏幕。使用的凡rem
单位。这个时候就用依据屏幕的尺寸来来动态的装根节点html
font-size 值。这样可以化解多屏幕适配的题目。
遵照下面的 媒体询问代码

XHTML

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%; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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%;
    }
}

如此这般做的结果,有少独十分强烈的缺点

新生参考淘宝移动端页面适配规则,使用 js
获取客户端的升幅,根据设计稿的原型动态的测算font-size 的值。

详细的内容要圈这里
依据iPhone6设计稿动态计算rem值

9.档次垂直居中的题目

可以扣押前面写一定的相同首文章,末尾有叙到各种定位:【从0到1拟Web前端】CSS定位问题三(相对稳定,绝对定位)

此实现一个相对固定和绝对定位配合实现程度垂直居中之体。看效果:

图片 10

html 代码如下:

XHTML

<div class=”parent-div”> <div class=”child-div”></div>
</div>

1
2
3
<div class="parent-div">
        <div class="child-div"></div>
</div>

css代码如下:

CSS

.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; left:0;
right:0; bottom:0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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;
            left:0;
            right:0;
            bottom:0;
        }

纯属定位在布局中好老方边的化解过剩题目,但是大部分上还不失去采用绝对化定位,而是使浮动等办法。而当用
DOM 元素脱离当前文档流的早晚才祭绝对化定位。如: 弹层,悬浮层等。

3.flex没有版本浏览器的配合

先看我的代码:

CSS

{ box-flex: 1; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex:
1; width: 18.5rem; }

1
2
3
4
5
6
7
8
{
    box-flex: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 18.5rem;
}

此间只是吃左右简单限平分屏幕的大幅度。
前面运用 flex在安卓4.3的手机上相见一个题目。正常的页面应该如下图所示,

图片 11

唯独在 安卓4.3的无绳电话机及可是之类的结果

图片 12

后来研究了下天猫的页面(因为事先使用这 flex
就是参考天猫来修的),看到他俩当概念flex价值的时段
都见面有这样的一个特性width=0;

图片 13

再就是当我吃本人之页面也添加这个特性的当儿,页面的布局也换得健康了。我现纪念不懂得愿意是呀,只能当一个
hack
来使用。如果大家吧遇到是问题,请试一下长这个特性。如果大家知道为什么这么用,请指教一下。

5.夺丢 a,input 在移动端浏览器中之默认样式

10. css 中 line-height 的问题

line-height
一个挺重大之用处就是是叫咱的文本可以以父级元素中垂直居中,但是在用它的过程中呢会遇到有的问题。

先期来拘禁一个实例,如下图:
图片 14

代码也很粗略,就是当我们当div
中定义之字非常特别的景象下,我们看到字体和父级元素中来一对空子。那么就是干什么?
咱查阅一下 line-height 的定义,如下:

normal 默认。设置合理的行间距。
number 设置数字,此数字会与时底字体尺寸相乘来安实行间距。
length 设置一定的行间距。
% 基被当下字尺寸的百分比行间距。
inherit 规定当打父元素继承 line-height 属性的价。

因此当上述之情景咱设惦记使,我们的字能够撑满我们的容器,就待给父级容器上加
line-height属性都值也 100%

代码和机能如下:
图片 15

那为什么会出现上面的问题也?

line-height 和 font-size
的计算值之差(行距)分为两半,分别加到一个文本行内容之顶部及底。

故此,可以得出下面的一个公式:

一无所获间距 = line-height – font-size

从而,当装也line-height
的值为100%的时候,line-height的值就等于
font-size的尺寸,此时底空白间距为0

7.calc 息息相关问题

前面在举行布局的时候利用calc 出现了异常严重的丝上
BUG。后来即令追究了产此特性之应用。
calc吓用底地方便是,可以以另外单位间进行折算。但是浏览器支持之莫是充分好。看一下
can i use 截图:

图片 16

而且当用的时刻如果添加厂商前缀,达到兼容性。不过本匪推荐下,毕竟,浏览器支持有限。
以身作则代码:

CSS

#formbox { width: 130px;
/*加以厂商前缀,操作符(+,-,*,/)两止设出空格)*/ width:
-moz-calc(100% / 6); width: -webkit-calc(100% / 6); width: calc(100% /
6); border: 1px solid black; padding: 4px; }

1
2
3
4
5
6
7
8
9
#formbox {
  width:  130px;
  /*加厂商前缀,操作符(+,-,*,/)两边要有空格)*/              
  width:  -moz-calc(100% / 6);  
  width:  -webkit-calc(100% / 6);  
  width:  calc(100% / 6);  
  border: 1px solid black;
  padding: 4px;
}

研究过淘宝,天猫,京东的
h5端页面看到这单位用之无多,主要还是兼容性的题材吧。

8.box-sizing 的使用

解决盒模型在不同浏览器中呈现不同等的题材。但是仍然会生兼容性问题。看尽下面的浏览器支持列表。

box-sizing 属性用来改变默认的 CSS 盒模型
对元素高宽的计量方式。这个特性用于模拟那些非正确支持标准盒模型的浏览器的呈现。

她发出三独属于性值分别是:

content-box 默认值,标准盒模型。 width 与 height
只囊括内容之富裕和赛, 不包括边框,内边距,外边距。注意: 内边距, 边框 &
外边距 都当此盒子的表。 比如. 如果 .box {width: 350px}; 而且
{border: 10px solid black;}
那么在浏览器中之渲染之实在增幅将凡370px;

padding-box width 与 height 包括外边距,不包括边框和外边距。
border-box width 同 height
包括内边距同边框,不包括外地距。这是IE 怪异模式(Quirks mode)使用的
盒模型 。注意:这个上外边距同边框将会晤连以盒子中。比如 .box {width:
350px; border: 10px solid black;} 浏览器渲染出之肥瘦将凡350px.

浏览器支持:

图片 17

移步端 h5开发相关内容总结:CSS篇

2016/01/24 · CSS,
HTML5 · 1
评论 ·
移动端

正文作者: 伯乐在线 –
zhiqiang21
。未经作者许可,禁止转载!
接加入伯乐在线 专辑作者。

2.添加厂商前缀

运 flex
的上一定要记加厂商前缀(目前利用方法还起三种写法:1,旧的2,过度的3,新的)。不然肯定会起兼容性问题。

CSS

{ display: -webkit-box; display: -ms-flexbox; display: flex; display:
-webkit-flex; }

1
2
3
4
5
6
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
}

11.运 vertical-align 调整图标垂直居中

过多上我们如果管图标与仿配合以,而且要图标和文字还能够垂直居中。如下图所示:

图片 18

一旦一旦落实仿的垂直居中老轻,只需要动用line-height=父容器高度
。但是倘若惦记使图标能够垂直居中虽于费心。
例行情形下我们的字或说附近的容器,都应当同仿保持在同样的下线上,如下图:

图片 19

妇孺皆知的好看来咱们的回到图标不是直居中的。那么相应如何使图标垂直居中吗?

率先,我们先来做明白几独线之涉嫌(图表来源网络,侵权请告诉):
图片 20

然咱们就要用到 vertical-align 这个特性,最关键之某些凡是:
点名了行内(inline)元素或表格单元格(table-cell)元素的直对齐方式

baseline:将支持valign特性的对象的情节与父级元素基线对旅
sub:元素基线与父元素的下标基线对一起。
super:元素基线与父元素的上标基线对联合。
top: 元素及其子孙的头与整行的头对合。
text-top:元素顶端与父元素字体的上对同步。
middle:元素中线及父元素的基线对一头。
bottom:元素及其子孙的底端与整行的底端对同。
text-bottom:元素底端与父元素字体的底端对同步。
percentage:用百分比指定由基线算打底偏移量。可以吧负值。基线对于百分数来说就是0%。
length:用长值指定由基线算打底偏移量。可以呢负值。基线对于数值来说为0。(CSS2)

看下的平段落 html :

XHTML

<div class=”title-div”> <img src=”1_icon.png”
alt=”返回图标”> <!– <span >图标位置</span> –>
<span>我就是是标题</span> </div>

1
2
3
4
5
<div class="title-div">
        <img src="1_icon.png" alt="返回图标">
        <!– <span >图标位置</span> –>
        <span>我就是标题</span>
</div>

早期的结果是这样子的

图片 21

俺们想实现如下图所显示之结果,图标相对于右边的字体居中:

图片 22

此时刻我们将以vertical-align特性和安他的length属性,即设置我们的图标相对与文字基线的偏移量。
当我们参加性的时刻非常易使图标与仿都垂直居中。

CSS

{ vertical-align:15px; }

1
2
3
{
    vertical-align:15px;
}

此时段便会是咱们的图标和字体相对于父级元素居中。

4.吗自己之页面设置最充分幅面与极小幅度

一旦我们应用的凡rem 单位,使用 js 动态计算font-size
值的口舌,我们好尽适配最可怜及极小的顶点屏幕。但是当用户的屏幕超过一定之尺寸下还继续展示h5页面的语对用户会那个不团结。
咱俩参看下京东和淘宝的h5 页面

图片 23
图片 24

俺们看看了还是概念了页面的不过酷与太小增幅。这样以屏幕超过一定之尺寸下得再友好的示(本来这不是要的)。

自家吃好的活页面定义的极充分之增幅与极其小幅度分别是:

CSS

{ max-width:640px; min-width:320px; }

1
2
3
4
{
    max-width:640px;
    min-width:320px;
}

相关文章

标签:, ,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图