移动web前端开发—CSS篇

一、 标签提供了有关页面的元信息，例如作者、日期和时间、网页描述、关键词等，除了SEO，在移动端浏览器中它还有着更多的功能：

1. 作者、日期和时间、网页描述、关键词等

2. 开启响应式视窗

3. 忽略电话号码与邮箱的识别

4. 设置safari书签以及主屏幕图标

5. 开启iphone上webapp支持(将网页保存到iphone桌面)

6. 设置safari书签以及主屏幕图标

二、移动端CSS常用小技巧：

1. 禁止长按文本选中

class{
     -webkit-user-select:none;
             user-select:none;
}

2. 禁止触摸点击阴影

class{
     -webkit-tap-highlight-color: transparent;
}

3. 禁止输入框浏览器默认行为

class{
     -webkit-appearance:none;
}

4. 禁止长按弹出列表栏

class{
     -webkit-touch-callout:none;
}

5. 阻止移动设备字体自动进行大小调整

class{
      -webkit-text-size-adjust:none; 
}

三、CSS常用小技巧（PC端也适用）：

1. 解决ineline-block相邻元素之间3px间距的问题

父元素上增加CSS：font-size:0

2. div比被其包裹的img多出3px

需要把img设置为block
//原因：img是一种类似text的元素，在结束的时候，会在末尾加上一个空白符，所以就会多出3px

3. css 动画硬件加速（hack）

//CSS动画不会默认开启GPU加速，而是由浏览器的软件渲染引擎来执行可以通过一些hack来让浏览器开启GPU加速
.class {
       -webkit-transform: translateZ(0); 
       -moz-transform: translateZ(0); 
       -ms-transform: translateZ(0); 
       -o-transform: translateZ(0); 
       transform: translateZ(0); 
        
//Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速
}

4. 一行与任意行文本，溢出部分显示 省略号（...）

 
.class {
    overflow:hidden; 
    text-overflow:ellipsis;
    white-space:nowrap;
}
 
.class {
    overflow: hidden;
    word-break:break-all;
    text-overflow : ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;//此处为行数
    -webkit-box-orient: vertical;
}

四、滚动条

1. 开启滚动条

.element{
    white-space: nowrap;
    overflow: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

2. 自定义滚动条样式

.element::-webkit-scrollbar{/* 1 */} /*滚动条垂直方向的宽度与水平方向的高度*/
.element::-webkit-scrollbar-button{/* 2 */} /*滚动条按钮*/
.element::-webkit-scrollbar-track{/* 3 */} /*滚动条轨道*/
.element::-webkit-scrollbar-track-piece{/* 4 */} /*滚动条垂直方向轨道件*/
.element::-webkit-scrollbar-thumb{/* 5 */} /*滚动条轨道上的按钮*/ 
.element::-webkit-scrollbar-corner{/* 6 */} /*滚动条轨道上的滚动角*/ 
.element::-webkit-resizer{/* 7 */} /*窗口大小调整*/
 

scroll.jpg

3. 隐藏滚动条

.element::-webkit-scrollbar {display:none;}   建议不要使用，会造成滑动卡顿，可以用下面的替代
.element::-webkit-scrollbar {width:0;}
 

4. 滚动条位置控制

1、通过设置element.scrollLeft控制，如ul.scrollLeft=200，单位为px(不用添加)
2、可用于将导航滚动条的选择li定位到正中
     ul.scrollLeft = li.offsetLeft - screen.width/ 2 + li.style.width/2;

五、video标签

1. webview中视频小窗口播放

在video标签里加入webkit-playsinline属性即可(前提是webview允许，否则设置无效)

六、autio标签

1. ios中音频文件无法自动播放

  1、微信中禁止音视频自动播放
  2、...

内核	播放器特征	Unicode 应用代表
原生webkit	1、在较高ios版本中支持WebView小窗口播放，在非WebView中只能全屏播放2、正常获取播放器播放状态3、可正常获取播放器网络状态4、更改播放器静态宽高比会造成其显示紊乱	safari、chrome、微信、QQ、易信、微博
UCBrowser	1、不能获取播放器播放状态2、可正常获取播放器网络状态3、默认全屏播放，可以小窗口播放	UCBrowser
QQBrowser X5	1、可正常获取播放器播放状态2、可正常获取播放器网络状态3、播放器的CSS样式定位紊乱4、可以小窗口播放	QQBrowser、部分版本QQ

七、字体编码

写css时，通常需要设置字体名称,我们可以直接写中文,但是文件编码为GB2312、UTF-8等不匹配将会出现乱码。因此将中文字体名称转为unicode编码来避免出现这些错误。常见的中文字符unicode编码如下：
eg: font-family: "微软雅黑" -> font-family: "5fae8f6f96c59ed1"

字体名称	英文名称	Unicode 编码
宋体	SimSun	5b8b4f53
新宋体	NSimSun	65b05b8b4f53
黑体	SimHei	9ed14f53
微软雅黑	Microsoft YaHei	5fae8f6f96c59ed1
楷体_GB2312	KaiTi_GB2312	69774f53_gb2312
隶书	LiSu	96b64e66
幼园	YouYuan	5e7c5706
华文细黑	STXihei	534e65877ec69ed1
细明体	MingLiU	7ec6660e4f53
新细明体	PMingLiU	65b07ec6660e4f53

八、图片资源的加载

1. 在网页中引入图片资源:
   在该元素上无论添加 display:none; 或者 visibility:hidden; 都会对图片资源发起请求使用标签或者是CSS中的background-image 相同
2. 使用CSS中的background-image引入图片:
   在其父元素上添visibility:hidden; 仍然会对图片发起请求，但是若使用 display:none; 就不会发起请求了
3. 使用标签引入图片
   在元素上或者是在其父元素上，无论添加 display:none; 或者 visibility:hidden; 仍然会对图片资源发起请求

未完待续。。。