【总结】CSS/CSS3常用样式与web移动端资源

CSS/CSS3常用样式与知识点

IE条件注释

条件注释简介

IE中的条件注释（Conditional comments）对IE的版本和IE非IE有优秀的区分能力，是WEB设计中常用的hack方法。
条件注释只能用于IE5以上，IE10以上不支持。
如果你安装了多个IE，条件注释将会以最高版本的IE为标准。
条件注释的基本结构和HTML的注释(<!– –>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。

条件注释使用方法示例

<!–-[if IE 5]>仅IE5.5可见<![endif]–->
<!–-[if gt IE 5.5]>仅IE 5.5以上可见<![endif]–->
<!–-[if lt IE 5.5]>仅IE 5.5以下可见<![endif]–->
<!–-[if gte IE 5.5]>IE 5.5及以上可见<![endif]–->
<!–-[if lte IE 5.5]>IE 5.5及以下可见<![endif]–->
<!–-[if !IE 5.5]>非IE 5.5的IE可见<![endif]–->

针对IE6，7的hack，该怎么写

你可能会这么回答：使用 “>”，“_”，“*”等各种各样的符号来写hack。是的，这样做没错，但是需要记住每个符号分别被哪些浏览器识别，并且如果写的太乱将造成代码阅读起来十分困难。学习CSS必须抱有一种质疑精神，有没有一种hack方法可以不写这些乱七八糟的符号，并且代码易维护易读呢？我们可以看看好搜首页是怎么做的：在页面顶端有这样一句话：

<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="w3c"><!--<![endif]-->
</head>

在页面的CSS中，会看到这样的规则：

.ie7 #hd_usernav:before, .ie8 #hd_usernav:before {
    display: none
}
.ie6 .skin_no #hd_nav li, .ie7 .skin_no #hd_nav li, .ie8 .skin_no #hd_nav li {
    border-right-color: #c5c5c5
}
.ie6 .skin_no #hd_nav a, .ie7 .skin_no #hd_nav a, .ie8 .skin_no #hd_nav a {
    color: #c5c5c5
}

行内级元素可以设置宽高吗？有哪些？

在面试时，当被问到行内级元素可否设置宽高时，根据我们的经验往往会回答不能。但是这样往往着了面试官的道，因为有一些特殊的行内元素，比如img，input，select等等，是可以被设置宽高的。一个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。比如img是一个置换元素，当不对它设置宽高时，它会按照本身的宽高进行显示。所以这个问题的正确答案应该是置换元素可以，非置换元素不可以。

纯css 实现footer sticker

希望footer一直在页面底部html代码：

<!--主体内容-->
<div id="sticker">
    <div id="stickerCon"></div>
</div>

<!--底部内容-->
<div id="footer">footer</div>

css代码：

html, body,#sticker {height: 100%;}
body > #sticker {height: auto; min-height: 100%;}
#stickerCon {padding-bottom: 40px;} 
#footer {
    margin-top:-41px;
    height: 40px; 
    width: 100%; 
    text-align: center;
    line-height: 40px;
    color: #ABA498;
    font-size: 12px;
    background: #fafafa;
    border-top:1px solid #E7E7E7;
}

CSS font属性简写样式

p.ex1{font:italic arial,sans-serif;}
p.ex2{font:italic bold 12px/20px arial,sans-serif}

可以按顺序设置如下属性：

font-style （规定字体样式）
font-variant （规定字体异体）
font-weight
font-size/line-height
font-family

详情请参考地址：http://www.w3school.com.cn/cssref/pr_font_font.asp

CSS修改选中文字的颜色

html代码：

<p class="p1">第一段文字选中效果</p>
<p class="p2">第二段文字选中效果</p>

css代码：

.p1::selection{background:red;color:#fff;}
.p2::selection{background: black;color:red;}

选中文字后的效果如图所示：

强制文本显示

单行显示语法：white-space:nowrap;

让一段文字在固定宽度在一行显示，最后一个字符为省略标记(...)，css样式如下

div{
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}

多行文本最后省略号：

div{
  display: -webkit-box; 
  -webkit-line-clamp:2;
  overflow: hidden; 
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

这里用到了文本溢出显示省略号的，即设置溢出文本显示为省略标记：

语法：text-overflow:text-overflow:clip | ellipsis | ellipsis-word（css3新增加的）;

clip：表示直接裁切溢出的文本；
ellipsis：表示文本溢出时，显示省略标记(...)，省略标记代替最后一个字符；
ellipsis-word：表示文本溢出时，也是显示省略标记(...),不同的是，省略标记代替的是最后一个词)

zoom:1的原理和作用

语法：zoom：normal | <number> | <percentage>
取值：

normal：使用对象的实际尺寸。
<number>：用浮点数来定义缩放比例。不允许负值
<percentage>：用百分比来定义缩放比例。不允许负值

兼容性：

例子：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>zoom_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
body{line-height:1.5;}
h1{margin:0;font-size:16px;font-family:Arial;}
.test{zoom:normal;}
.test2{zoom:5;}
.test3{zoom:300%;}
</style>
</head>
<body>
<h1>zoom:normal</h1>
<div class="test">zoom:normal</div>

<h1>zoom:5</h1>
<div class="test2">zoom:5</div>

<h1>zoom:300%</h1>
<div class="test3">zoom:300%</div>
</body>
</html>

谷歌与IE浏览器结果如图所示（Firefox不支持）：

参考地址：http://www.css88.com/book/css/properties/user-interface/zoom.htm

Zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。

在平常的css编写过程中，zoom:1能够比较神奇地解决ie下比较奇葩的bug。

譬如外边距（margin）的重叠，譬如浮动的清除，譬如触发ie的 haslayout属性等等。

（重点）当设置了zoom的值之后，所设置的元素就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

ie下子元素浮动时候父元素不随着自动扩大的问题，使用下面的CSS写法：

.父元素 {   overflow: auto; zoom: 1   }

点击a标签里面的图片，IE中图片出现虚线框问题

<a href="javascript:void(0)"><img src="images/suba.gif"></a>

解决办法：

a{outline:none;}//主要是针对火狐等浏览器，但IE不行
img{border:0;}
a:active{noOutline:expression(this.onFocus=this.blur());}//解决IE6，IE7中的虚线框。

对于a标签来说，一般简单的解决办法是：
在a标签里加入js控制，当a标签被聚焦时，强制取消焦点，这时候a标签自然不会有虚线框。

<a href="#"onfocus="this.blur();">测试</a>

但是当连接太多的时候，一个一个的加这段代码不实用

css ie6、ie7中overflow:hidden无效解决办法

产生原因：
当父元素的直接子元素或者下级子元素的样式拥有position:relative 属性时，父元素的overflow:hidden 属性就会失效。

解决办法：
我们在IE 6、7 内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。
解决这个bug很简单，在父元素中使用 *position:relative; 即可解决该bug

表格语法

<table aling=left>...</table>表格位置,置左
<table aling=center>...</table>表格位置,置中
<table background=图片路径>...</table>背景图片的URL=就是路径网址
<table border=边框大小>...</table>设定表格边框大小(使用数字)
<table bgcolor=颜色码>...</table>设定表格的背景颜色
<table borderclor=颜色码>...</table>设定表格边框的颜色
<table borderclordark=颜色码>...</table>设定表格暗边框的颜色
<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色
<table cellpadding=参数>...</table>指定内容与格线之间的间距(使用数字)
<table cellspacing=参数>...</table>指定格线与格线之间的距离(使用数字)
<table cols=参数>...</table>指定表格的栏数
<table frame=参数>...</table>设定表格外框线的显示方式
<table width=宽度>...</table>指定表格的宽度大小(使用数字)
<table height=高度>...</table>指定表格的高度大小(使用数字)
<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)
<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)

设置表格中的td宽度固定`table-layout:fixed`

table{table-layout:fixed;}

语法 table-layout:automatic | fixed | inherit

automatic：默认。列宽度由单元格内容设定。
fixed：列宽由表格宽度和列宽度设定。
inherit：规定应该从父元素继承 table-layout 属性的值。

合并表格边框`border-collapse:collapse`

table{border-collapse:collapse;}

语法：border-collapse:separate | collapse | inherit

separate：默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit：规定应该从父元素继承 border-collapse 属性的值。

例如：

table{border-collapse:collapse;}
table, td, th{border:1px solid black;}

CSS text-transform控制文本的大小写

描述：text-transform 属性控制文本的大小写。

语法：text-transform:none | capitalize | uppercase | lowercase | inherit

none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母，仅有小写字母。
inherit 规定应该从父元素继承 text-transform 属性的值。

text-stroke

[ text-stroke-width ]：设置或检索对象中的文字的描边厚度 [ text-stroke-color ]：设置或检索对象中的文字的描边颜色

text-stroke(文本描边)和text-fill-color(文本填充色)注意点：

目前这两个属性只有webkit内核的Safari和Chrome支持，例如： -webkit-text-stroke: 3.3px #2A75BF;

text-fill-color：颜色值，和color属性差不多都是文字的样式；

同时使用text-fill-color和color属性，text-fill-color将覆盖color属性的颜色值；

text-fill-color可以使用透明值，即：text-fill-color：transparent

text-shadow

text-shadow:0px 0px 0px #333333;

属性值依次：水平方向位移（支持负值）、垂直方向位移（支持负值）、模糊半径、阴影颜色
text-shadow对同一个text，可设置多个阴影，与box-shadow类似，使用逗号","分割，前一个设置效果在后一个设置效果之上。
box-shadow 参考：http://www.cnblogs.com/lhb25/archive/2013/02/20/css3-box-shadow.html

box-shadow

为了兼容各主流浏览器并支持这些主流浏览器的较低版本，在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。全面的写法：

.box-shadow-6{  
    box-shadow:-10px 0 10px red, /*左边阴影*/  
    10px 0 10px yellow, /*右边阴影*/  
    0 -10px 10px blue, /*顶部阴影*/  
    0 10px 10px green; /*底边阴影*/  
}

参考地址：http://blog.csdn.net/freshlov...

letter-spacing字符间距

letter-spacing 属性增加或减少字符间的空白（字符间距）。
例如： letter-spacing: 2px;

textarea去掉右侧滚动条，去掉右下角拖拽

<TEXTAREA style= "overflow:hidden; resize:none; "> </TEXTAREA>

css中透明度兼容代码

div{filter: alpha(opacity=80);opacity:0.8;}

根据input的type来控制css样式

a. 用css中的type选择器

input[type="text"]{ background-color:#FFC;}

b.用css的expression判断表达式

input{ background-color:expression(this.type=="text"?'#FFC':'');}

c.用javascript脚本实现(觉得没必要，省略...)

css3设置字体

<style> 
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
    url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>

网页字体设置

font-family:'YourWebFontName';
src:url('YourWebFontName.eot'); /* IE9 Compat Modes */
src:url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
    url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */}

参考地址：http://www.cnblogs.com/moqiutao/p/5070463.html

css强制性换行

div{
  word-break:break-all; /*支持IE，chrome，FF不支持*/
  word-wrap:break-word;/*支持IE，chrome，FF*/
}

CSS :first-child 选择器,:last-child选择器,nth-child(IE7,8无效，不识别)

:nth-child(2)选取第几个标签，“2可以是你想要的数字”
:nth-child(2n)选取偶数标签，2n也可以是even
:nth-child(2n-1)选取奇数标签，2n-1可以是odd
:nth-child(3n+1)自定义选取标签，3n+1表示“隔二取一”

css3实现背景颜色渐变

background:-webkit-linear-gradient(top,#FFF,#cb1919);
background:-o-linear-gradient(top,#FFF,#cb1919);
background:-ms-linear-gradient(top,#FFF,#cb1919);
background:-moz-linear-gradient(top,#FFF,#cb1919);
background:linear-gradient(top,#FFF,#cb1919);

第一个参数：设置渐变的起始位置

第二个参数：设置起始位置的颜色

第三个参数：设置终止位置的颜色

IE 浏览器

IE浏览器实现渐变只能使用IE自己的滤镜去实现

 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);

第一个参数：渐变起始位置的颜色

第二个参数：渐变终止位置的颜色

第三个参数：渐变的类型

0 代表竖向渐变 1 代表横向渐变

CSS3下的渐变文字效果实现

h1.start-gradient {
  font-weight: bold;
  font-family: helvetica;
  text-align:center;
  background: -webkit-linear-gradient(left, #4f185d , #fe5d4b);     /* 背景色渐变 */
  -webkit-background-clip: text;         /* 规定背景的划分区域 */
  -webkit-text-fill-color: transparent;  /* 防止字体颜色覆盖 */
}

<h1 class="start-gradient">快速开始</h1>

注：这个文字效果只在webkit内核的浏览器上才能正常工作。Firefox 浏览器不支持在文字上使用background-clip属性

关键的三行代码：

background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

详细参考：《小tip:CSS3下的渐变文字效果实现》

css3的RGB颜色和HSL颜色， IE8不识别rgba写法

其中RGB颜色的原理是通过定义不同的红绿蓝色值来组成一个颜色。color:rgb(254,2,8);

其中HSL是通过色相、饱和度、亮度模式来申明颜色的。color:hsl(359,99%,40%);

如果需要设置透明背景则可以用到他们：

background-color:hsla(0,0%,100%,0.8);

background-color:rgba(255,255,255,0.8);

不使用opacity的原因是：opacity使里面的元素也透明了，而上面的不会。

background-color:rgba(0,0,0,0.5)，此写法解决opacity带来的元素也透明问题，但IE8低版本浏览器不支持。

初始化em，u的斜体

em,u{font-style: normal;}

媒体查询功能

一般写法：

@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}

应该有人会发现上面这段代码里面有个screen，他的意思是在告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体。但是目前我发现很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印时，你可以直接这样写：

@media (max-width: 960px){
    body{
        background: #000;
    }
}

其中css2的媒体查询：

<link rel="stylesheet" type="text/css" media="screen" href="style.css">

我们想知道移动设备是不是纵向放置的显示屏，可以这样写：

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">

我们把第一段的代码也用CSS2来实现，让它一样可以让页面宽度小于960的执行指定的样式文件：

<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">

但是上面这个方法，最大的弊端是他会增加页面http的请求次数，增加了页面负担，我们用CSS3把样式都写在一个文件里面才是最佳的方法。

下面的写法是实现尺寸等于480px：

@media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2){

//自己添加的样式

}

其中对于-webkit-min-device-pixel-ratio作如下解释：

-webkit-min-device-pixel-ratio为1.0：

1.所有非Retina的Mac
2.所有非Retina的iOS设备
3.Acer Iconia A500
4.Samsung Galaxy Tab 10.1
5.Samsung Galaxy S

-webkit-min-device-pixel-ratio为1.3：

1. Google Nexus 7

-webkit-min-device-pixel-ratio为1.5：

1.Google Nexus S
2.Samsung Galaxy S II
3.HTC Desire
4.HTC Desire HD
5.HTC Incredible S
6.HTC Velocity
7.HTC Sensation

-webkit-min-device-pixel-ratio为2.0：

1.iPhone 4
2.iPhone 4S
3.iPhone 5
4.iPad (3rd generation)
5.iPad 4
6.所有Retina displays 的MAC
7.Google Galaxy Nexus
8.Google Nexus 4
9.Google Nexus 10
10.Samsung Galaxy S III
11.Samsung Galaxy Note II
12.Sony Xperia S
13.HTC One X

详情查看：《CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全》

样式实现三角形

div{
  position:absolute;
  left:50%;
  bottom:0;
  margin-left:-10px;
  width:0;
  height:0; 
  border-width:10px;
  border-style:solid dashed dashed dashed;
  border-color:transparent transparent #71151c transparent;
}

css3水平垂直居中

div{
  display: box; 
  display: -webkit-box; 
  display: -moz-box; 
  -webkit-box-pack:center; 
  -moz-box-pack:center; 
  -webkit-box-align:center; 
  -moz-box-align:center; 
}

css3属性 -webkit-filter(改变模糊度亮度透明度等方法)

-webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。

现在规范中支持的效果有：

- grayscale 灰度值为0-1之间的小数

- sepia 褐色　　　　　　值为0-1之间的小数

- saturate 饱和度　　　　值为num

- hue-rotate 色相旋转　　值为angle

- invert 反色　　　　　　值为0-1之间的小数

- opacity 透明度　　　　　值为0-1之间的小数

- brightness 亮度　　　　值为0-1之间的小数

- contrast 对比度　　　　值为num

- blur 模糊　　　　　　值为length

- drop-shadow 阴影

用法是标准的CSS写法，如：

-webkit-filter: blur(2px);

使用方法：（配合动画使用）

.jaguar-con-show img.jaguar-con-imglast{               
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    
}
.jaguar-con-show img.jaguar-con-imglast{   
    -webkit-filter: blur(3px) brightness(.6);
    -moz-filter: blur(3px) brightness(.6);
    -o-filter: blur(3px) brightness(.6);
    -ms-filter: blur(3px) brightness(.6);    
    filter: blur(3px) brightness(.5); 
    -webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    /*border: 3px solid #000;*/
}

CSS pointer-events

Pointer-events原本来源于SVG，目前在很多浏览器中已经得到体现。不过，要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events，基本上可以将它设置为auto，这是正常的行为，而“none”是一个有趣的属性。

如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件，而是让事件穿过该元素到达下面的元素.

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性，IE6/7/8/9都不支持，Opera在SVG中支持该属性但是HTML中不支持。

禁止button按钮的点击与禁止a标签的跳转

pointer-events:none禁止掉鼠标事件（css3属性）
禁止button按钮的点击：

<button type="button" class="btn btn-default btn-lg">默认按钮</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按钮</button>

button禁止点击的样式：

button{cursor: not-allowed;}

所以button用到了disabled="disabled"与样式cursor: not-allowed

禁止a标签的跳转行为：

<a href="#" class="btn btn-default btn-lg" role="button">链接</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">禁用链接</a>

样式：

a{pointer-events: none;cursor:not-allowed}

参考地址：http://www.runoob.com/try/try.php?filename=bootstrap3-button-disabledstate
但是用到键盘tab键的时候出现a标签可以跳转，实现键盘tab也禁止a标签跳转参考地：
http://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/

样式改变单词的大小写

首字母大写：text-transform:capitalize
全部大写：text-transform:uppercase
全部小写：text-transform:lowercasecase

<spanstyle="text-transform:capitalize;" >this is a test!!!</span>
首字母大写<inputtype="text"style="text-transform:capitalize;">
全部大写<inputtype="text"style="text-transform:uppercase;">
全部小写<inputtype="text"style="text-transform:lowercasecase;">

html title属性内容换行方法

a.直接填写title内容时候“回车键”换行
b.使用html title换行代码
使用代码换行共两种代码，均可实现html标签内title内容显示时换行。
换行代码符合分别为：
“
”和“”
“
”拼写：&（and符号，键盘数字键7一起&）+ #（井号）+ 10（阿拉伯数字十）+ ;（小写分号）
“”拼写：&（and符号，键盘数字键7一起&）+ #（井号）+ 13（阿拉伯数字十三）+ ;（小写分号）
以上符合数字输入均必须英文半角模式输入。使用时候，在需要换行地方任选一种（组）换行符号代码即可。

移动端定宽布局，安卓上文字变大了解决办法

例如：

<meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi" />

那么解决办法：
给文字区外面的div设最大高度100%。

HTML5:input file控件限制上传文件类型

input file控件限制上传文件类型
文件类型中间用，分开
html和htm这样的要写成两个

<input type="file"  name="filePath" accept=".jpg,.jpeg,.doc,.docx,.xls,.xlsx,.pdf">

如果限制上传文件为图片类型，如下：

<input type="file" class="file" value="上传" accept="image/*"/>

去掉input聚焦,点击a标签，出现的外虚线框

input:focus{outline: none;}

CSS3 calc中使用vw让overflow:auto页面滚动条出现时不跳动

传统的实现方式：

body { overflow-y: scroll; }

css3实现方式：

.wrap-outer {
    margin-left: calc(100vw - 100%);
}

或者：

.wrap-outer {
    padding-left: calc(100vw - 100%);
}

首先，.wrap-outer指的是居中定宽主体的父级，如果没有，创建一个（使用主体也是可以实现类似效果，不过本着宽度分离原则，不推荐）；
然后，calc是CSS3中的计算，IE10+浏览器支持，IE9浏览器基本支持(不能用在background-position上)；
最后，100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！而100%是可用宽度，是不含滚动条的宽度。
于是，calc(100vw - 100%)就是浏览器滚动条的宽度大小（如果有，如果没有滚动条则是0）！左右都有一个滚动条宽度（或都是0）被占用，主体内容就可以永远居中浏览器啦，从而没有任何跳动！

参考地址：http://www.zhangxinxu.com/wordpress/2015/01/css-page-scrollbar-toggle-center-no-jumping/

Chrome、Safari等浏览器，当表单提交用户选择记住密码后，下次自动填充表单的背景变成黄色，影响了视觉体验是否可以修改？

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  background-color: #fff;//设置成元素原本的颜色
  background-image: none;
  color: rgb(0, 0, 0);
}
//方法2：由(licongwen )补充
input:-webkit-autofill {
    -webkit-box-shadow: 0px 0 3px 100px #ccc inset; //背景色
}

***以下内容将主要是在移动端使用的多***

meta相关知识

H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

忽略将页面中的数字识别为电话号码

<meta name="format-detection" content="telephone=no" />

忽略Android平台中对邮箱地址的识别

<meta name="format-detection" content="email=no" />

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari

<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios7.0版本以后，safari上已看不到效果 -->

将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->

总结可能用到的meta标签

    
    <!-- 设置缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <!-- 可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ） -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
    <meta name="format-detection"content="telephone=no, email=no" />

    其他meta标签
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">

移动端viewport模板

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
  <meta content="yes" name="apple-mobile-web-app-capable"> <!-- ios7.0版本以后，safari上已看不到效果,可以删除-->
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <meta content="email=no" name="format-detection">
  <title>viewport通用</title>
  <link style="text/css" rel="stylesheet" href="home.css">
  <script type="text/javascript" src="js/app.js"></script>
</head>
<body>
    <!--页面内容-->
</body>
</html>

viewport模板 - target-densitydpi=device-dpi，android 2.3.5以下版本不支持

<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"><!-- width取值与页面定义的宽度一致 -->

自己做移动端活动的时候常如下方式：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta content="yes" name="apple-mobile-web-app-capable"> <!-- ios7.0版本以后，safari上已看不到效果,可以删除-->
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <meta content="email=no" name="format-detection">
  <title>viewport通用</title>
  <script type="text/javascript">
    var phoneWidth = parseInt(window.screen.width);
    var phoneScale = phoneWidth / 750;
    var ua = navigator.userAgent;
    if (/Android (\d+\.\d+)/.test(ua)) {
        var version = parseFloat(RegExp.$1);
        if (version > 2.3) {
            document.write('<meta name="viewport" id="vie" content="width=750, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
        } else {
            document.write('<meta name="viewport" id="vie" content="width=750, target-densitydpi=device-dpi">');
        }
    } else {
        document.write('<meta id="vie" name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi, minimal-ui">');
    }
  </script>
  <link style="text/css" rel="stylesheet" href="home.css">
  <script type="text/javascript" src="js/app.js"></script>
</head>
<body>
    <!--页面内容-->
</body>
</html>

对下面代码的详细解释：

 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

device-width：设备宽度
width：设置viewport宽度，为一个正整数，或字符串‘device-width’
height：设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
initial-scale：默认缩放比例(初始缩放比例)，为一个数字，可以带小数
minimum-scale：允许用户最小缩放比例，为一个数字，可以带小数
maximum-scale：允许用户最大缩放比例，为一个数字，可以带小数
user-scalable：是否允许手动缩放

延伸提问

怎样处理移动端 1px 被渲染成 2px 问题:

1 局部处理

meta标签中的 viewport属性，initial-scale 设置为 1
rem 按照设计稿标准走，外加利用transfrome 的scale(0.5) 缩小一倍即可；

2 全局处理

meta标签中的 viewport属性，initial-scale 设置为 0.5
rem 按照设计稿标准走即可

移动端问题总结

移动端如何定义字体font-family

中文字体使用系统默认即可，英文用Helvetica，为什么呢，首先先看一下各平台的主流字体支持情况（来源网络，没有验证）！！！

各系统的默认字体和常用字体：

系统	默认西文字体	默认中文字体	其他常用西文字体	其他常用中文字体
Windows	宋体	宋体	Tahoma、Arial、Verdana、Georgia	微软雅黑、黑体
Android 4.0以下	Droid Sans	Droid Sans Fallback	Aria	无宋体、无微软雅黑
Android 4.0及以上	Roboto	Roboto	Arial	无宋体、无微软雅黑
iOS	Helvetica Neue	Heiti SC (黑体)	Tahoma(v7.0)、Arial、Verdana、Georgia	STHeiti(v7.0)、无宋体、无微软雅黑
Mac OS X 10.6以下	Helvetica Neue	STHeiti (华文黑体)	Tahoma、Arial、Verdana、Georgia	宋体、无微软雅黑
Mac OS X 10.6及以上	Helvetica Neue	Hiragino Sans GB (冬青黑体简体中文)	Tahoma、Arial、Verdana、Georgia	宋体、无微软雅黑
winphone 系统	Segoe	Dengxian(方正等线体)		无微软雅黑

需要详细相关信息，可查看《兼容PC手机端字体》文章

结论

各个手机系统有自己的默认字体，且都不支持微软雅黑
如无特殊需求，手机端无需定义中文字体，使用系统默认
英文字体和数字字体可使用 Helvetica ，三种系统都支持

代码：

/* 移动端定义字体的代码 */
body{font-family:Helvetica;}

常见的中文字体对应的英文写法：

    @ 宋体      SimSun
    @ 黑体      SimHei
    @ 微信雅黑   Microsoft Yahei
    @ 微软正黑体 Microsoft JhengHei
    @ 新宋体    NSimSun
    @ 新细明体  MingLiU
    @ 细明体    MingLiU
    @ 标楷体    DFKai-SB
    @ 仿宋     FangSong
    @ 楷体     KaiTi
    @ 仿宋_GB2312  FangSong_GB2312
    @ 楷体_GB2312  KaiTi_GB2312  
    @
    @ 说明：中文字体多数使用宋体、雅黑，英文用Helvetica
    
    body { font-family: Microsoft Yahei,SimSun,Helvetica; }

移动端touch事件(区分webkit 和 winphone)

当用户手指放在移动设备在屏幕上滑动会触发的touch事件

以下支持webkit

touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指
touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
touchend——当手指离开屏幕时触发
touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用

TouchEvent

touches：屏幕上所有手指的信息
targetTouches：手指在目标区域的手指信息
changedTouches：最近一次触发该事件的手指信息
touchend时，touches与targetTouches信息会被删除，changedTouches保存的最后一次的信息，最好用于计算手指信息

参数信息(changedTouches[0])

clientX、clientY在显示区的坐标
target：当前元素

以下支持winphone 8

MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指
MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生：阻止页面滚动
MSPointerUp——当手指离开屏幕时触发

移动端click事件有300 ms的延迟响应问题

历史原因：

2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。

双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。

原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接<a href="#"></a>，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。

解决方案：

fastclick可以解决在手机上点击事件的300ms延迟，地址：https://github.com/ftlabs/fastclick
zepto的touch模块，tap事件也是为了解决在click的延迟问题

触摸事件的响应顺序

1、ontouchstart 
2、ontouchmove 
3、ontouchend 
4、onclick

解决300ms延迟的问题，也可以通过绑定ontouchstart事件，加快对事件的响应

清除IOS系统手机对input等表单元素的默认样式

.css{-webkit-appearance:none;}

伪元素改变number类型input框的默认样式

input[type=number]::-webkit-textfield-decoration-container {
    background-color: transparent;    
}
input[type=number]::-webkit-inner-spin-button {
     -webkit-appearance: none;
}
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
}

CSS美化Placeholder提示信息的样式兼容

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

手机对Placeholder提示信息都基本带有默认的样式，兼容各种浏览器的使用方式：

.css::-webkit-input-placeholder {color: #777;}    /* WebKit browsers */
.css:-moz-placeholder {color: #777;opacity: 1;}   /* Mozilla Firefox 4 to 18 */
.css::-moz-placeholder {color: #777;opacity: 1;}  /* Mozilla Firefox 19+ */
.css:-ms-input-placeholder {color: #777;}         /* Internet Explorer 10+ */

webkit表单输入框placeholder的文字能换行么

ios可以，android不行~

在textarea标签下都可以换行~

取消a,button等元素被触摸时产生的半透明灰色遮罩或者虚线框问题

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

-webkit-tap-highlight-color :当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。

该属性可以只设置透明度。如果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。

详细参考：《-webkit-tap-highlight-color 》

关闭手机端横屏或者竖屏自动调整字体大小功能

ios使用-webkit-text-size-adjust禁止调整字体大小:

body{-webkit-text-size-adjust: 100%!important;}

text-size-adjust 设为 none 或者 100% 关闭字体大小自动调整功能。

android使用以下代码，该接口只在微信浏览器下有效:

/**
 * 页面加入这段代码可使Android机器页面不再受到用户字体缩放强制改变大小
 * 但是会有一个1秒左右的延迟，期间可以考虑通过loading展示
 * 仅供参考
 */
(function(){
    if (typeof(WeixinJSBridge) == "undefined") {
        document.addEventListener("WeixinJSBridgeReady", function (e) {
            setTimeout(function(){
                WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
                    alert(JSON.stringify(res));
                });
            },0);
        });
    } else {
        setTimeout(function(){
            WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
                alert(JSON.stringify(res));
            });
        },0);
    }
})();

禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

.css{-webkit-touch-callout: none}

-webkit-touch-callout 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。

适用于：链接元素比如新窗口打开，img元素比如保存图像等等

取值：

none：系统默认菜单被禁用

inherit：系统默认菜单不被禁用

详细参考：《-webkit-touch-callout 》

禁止ios和android用户选中文字

.css{-webkit-user-select:none}

当然pc端现在也在用禁止用户选中文字，兼容写法：

.test{
  -webkit-user-select:none;
  -moz-user-select:none;
  -o-user-select:none;
  user-select:none;
}

当然有时候pc上也直接写到html代码中，如：

<div class="test" onselectstart="return false;" unselectable="on">选择我试试，你会发现怎么也选择不到我，哈哈哈哈</div>

代码解释：

IE6-9不支持该属性，但支持使用标签属性 onselectstart="return false;" 来达到 user-select:none 的效果；Safari和Chrome也支持该标签属性；
直到Opera12.5仍然不支持该属性，但和IE6-9一样，也支持使用私有的标签属性 unselectable="on" 来达到 user-select:none 的效果；unselectable 的另一个值是 off；
除Chrome和Safari外，在其它浏览器中，如果将文本设置为 -ms-user-select:none;，则用户将无法在该文本块中开始选择文本。不过，如果用户在页面的其他区域开始选择文本，则用户仍然可以继续选择将文本设置为 -ms-user-select:none; 的区域文本；
对应的脚本特性为userSelect。

那有些网页为了尊重原创，复制的文本都会被加上一段来源说明，是如何做到的呢？问的好！等的就是你这个问题 -_- 。

大致思路：

1、答案区域监听copy事件，并阻止这个事件的默认行为。
2、获取选中的内容（window.getSelection()）加上版权信息，然后设置到剪切板（clipboarddata.setData()）。

如何禁止移动端浏览器长按对图片弹出保存

pointer-events: none;

打电话发短信，发邮件的怎么实现

打电话：<a href="tel:0755-10086">打电话给:0755-10086</a>
发短信：winphone系统无效，<a href="sms:10086">发短信给: 10086</a>
发邮件：<a href="mailTo:10086@qq.com">10086@qq.com</a>

详细了解mailTo：移动web页面给用户发送邮件的方法 (邮件含文本、图片、链接)

移动端实现类似hover效果

移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活移动端css的active效果。

直接在body上添加ontouchstart，同样可激活移动端css的active效果，比较推荐这种方式，代码如下：

html代码：

<body ontouchstart>
</body>

css代码：

.btn:active{background-color: red;}

开启硬件加速

解决页面闪白，保证动画流畅

.css {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

android 上去掉语音输入按钮

input::-webkit-input-speech-button {display: none}

取消input在ios下，输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

如何阻止windows Phone的默认触摸事件

winphone下默认触摸事件事件使用e.preventDefault是无效的

目前解决方法是使用样式来禁用

html{-ms-touch-action: none;}/* 禁止winphone默认触摸事件 */

屏幕旋转的事件和样式

JS判断横屏竖屏

window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式；

window.onorientationchange = function(){
    switch(window.orientation){
        case -90:
        case 90:
        alert("横屏:" + window.orientation);
        case 0:
        case 180:
        alert("竖屏:" + window.orientation);
        break;
    }
}

当然有时候需要PC端与移动端公用代码，一般这样监听：

//判断手机横竖屏状态：
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
        if (window.orientation === 180 || window.orientation === 0) {
            alert('竖屏状态！');
        }
        if (window.orientation === 90 || window.orientation === -90 ){
            alert('横屏状态！');
        } 
    }, false);
//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。

CSS判断横屏竖屏

写在同一个CSS中：

//竖屏时使用的样式
@media screen and (orientation:portrait) {
    .css{}
}

//横屏时使用的样式
@media screen and (orientation:landscape) {
    .css{}
}

分开写在2个CSS中：

竖屏

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

横屏

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

CSS3判断屏幕横屏

@media screen and (min-aspect-ratio: 13/8) {
  
}

如图实现如下效果：

html代码：

<!--屏幕设备旋转判断开始-->
<div id="orientLayer" class="mod-orient-layer">
    <div class="mod-orient-layer__content"><i class="icon mod-orient-layer__icon-orient"></i>
        <div class="mod-orient-layer__desc">为了更好的体验，请使用竖屏浏览</div>
    </div>
</div>
<!--屏幕设备旋转判断结束-->

css代码：

@-webkit-keyframes rotation {
    10% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
    50%, 60% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }
    90% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
    100% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
}

@keyframes rotation {
    10% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
    50%, 60% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }
    90% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
    100% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
}

#orientLayer {
    display: none;
}

@media screen and (min-aspect-ratio: 13/8) {
    #orientLayer {
        display: block;
        width:100%;
        height:100%;
    }
}

.mod-orient-layer {
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #333;
    z-index: 9997
}

.mod-orient-layer__content {
    position: absolute;
    width: 100%;
    top: 45%;
    margin-top: -75px;
    text-align: center
}

.mod-orient-layer__icon-orient {
   background-image: url(../images/icon-orient.png);
    display: inline-block;
    width: 67px;
    height: 109px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -webkit-animation: rotation infinite 1.5s ease-in-out;
    animation: rotation infinite 1.5s ease-in-out;
    -webkit-background-size: 67px;
    background-size: 67px
}

.mod-orient-layer__desc {
    margin-top: 20px;
    font-size: 15px;
    color: #fff
}

IE10（winphone8）表单元素默认外观如何重置

禁用 select 默认下拉箭头

::-ms-expand 适用于表单选择控件下拉箭头的修改，有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

select::-ms-expand {
display: none;
}

禁用 radio 和 checkbox 默认样式

::-ms-check 适用于表单复选框或单选按钮默认图标的修改，同样有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{
display: none;
}

禁用PC端表单输入框默认清除按钮

当表单文本输入框输入内容后会显示文本清除按钮，::-ms-clear 适用于该清除按钮的修改，同样设置使它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{
display: none;
}

Retina 显示屏的问题

retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个

在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍

那么，前端的应对方案是：

设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2

//例如图片宽高为：200px*200px，那么写法如下
.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px

.css{font-size:20px}

移动端设置滚动条的默认样式

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width:12px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
  border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius:10px;
  background:rgba(0,0,0,0.1);
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
  background:rgba(255,0,0,0.4);
}

为移动端页面中滑动滚动条的时候，添加惯性效果的方法

首先设置：

div{height:100%;overflow-y:auto;}

但是实际在 iPhone 上测试时，发现 Safari（也包括很多 iOS App 内置浏览器使用的 UIWebView）竟然完全禁用掉了著名的「惯性滚动」效果。

但解决方法是有的，令人吃惊的是还非常简单：只有一条 CSS 属性即可解决问题：

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

有的同学添加了这一条属性后遇到了向下滑动后页面变成空白的问题，实际上可以通过一条 CSS 属性把页面加载到内存来解决：

body{-webkit-transform:translate3d(0,0,0);}

注：如果设置了-webkit-overflow-scrolling: touch;那么在IOS系统下对于改变滚动条的默认样式将失效，即上面一条所述。

移动端实现控制文本行数

div{
  display: -webkit-box;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}

移动端使用flex让内容平均分配

htm代码：

<nav>
  <a href="#">a</a>
  <a href="#">b</a>
  <a href="#">c</a>
</nav>

css代码：

nav{display:-webkit-flex;display:flex;}
a{-webkit-flex:1;flex:1;}

网易新闻移动端设置rem代码

/**
 * view-port list:
320x480
320x568
320x570
360x592
360x598
360x604
360x640
360x720
375x667
375x812
393x699
412x732
414x736
480x854
540x960
640x360
720x1184
720x1280
800x600
1024x768
1080x1812
1080x1920
 */
html {
  font-size: -webkit-calc(13.33333333vw);
  font-size: calc(13.33333333vw);
}
@media screen and (max-width: 320px) {
  html {
    font-size: 42.667px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 321px) and (max-width: 360px) {
  html {
    font-size: 48px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 361px) and (max-width: 375px) {
  html {
    font-size: 50px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 376px) and (max-width: 393px) {
  html {
    font-size: 52.4px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 394px) and (max-width: 412px) {
  html {
    font-size: 54.93px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 413px) and (max-width: 414px) {
  html {
    font-size: 55.2px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 415px) and (max-width: 480px) {
  html {
    font-size: 64px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 481px) and (max-width: 540px) {
  html {
    font-size: 72px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 541px) and (max-width: 640px) {
  html {
    font-size: 85.33px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 641px) and (max-width: 720px) {
  html {
    font-size: 96px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 721px) and (max-width: 768px) {
  html {
    font-size: 102.4px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 769px) {
  html {
    font-size: 102.4px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
body {
  font-family: "PingFangSC-Regular", "Microsoft YaHei", Helvetica;
  color: #333333;
  background: #f5f7f9;
}
html a {
  color: #333333;
}

posted @ 2015-08-23 23:07 风雨后见彩虹阅读(7823) 评论(5) 编辑收藏举报

刷新页面返回顶部

风雨后见彩虹

无论什么时候开始，重要的是不要停止

【总结】CSS/CSS3常用样式与web移动端资源

CSS/CSS3常用样式与知识点

IE条件注释

针对IE6，7的hack，该怎么写

行内级元素可以设置宽高吗？有哪些？

纯css 实现footer sticker

CSS font属性简写样式

CSS修改选中文字的颜色

强制文本显示

zoom:1的原理和作用

点击a标签里面的图片，IE中图片出现虚线框问题

css ie6、ie7中overflow:hidden无效解决办法

表格语法

设置表格中的td宽度固定table-layout:fixed

合并表格边框border-collapse:collapse

CSS text-transform控制文本的大小写

text-stroke

text-shadow

box-shadow

letter-spacing字符间距

textarea去掉右侧滚动条，去掉右下角拖拽

css中透明度兼容代码

根据input的type来控制css样式

css3设置字体

网页字体设置

css强制性换行

CSS :first-child 选择器,:last-child选择器,nth-child(IE7,8无效，不识别)

css3实现背景颜色渐变

CSS3下的渐变文字效果实现

css3的RGB颜色和HSL颜色， IE8不识别rgba写法

初始化em，u的斜体

媒体查询功能

样式实现三角形

css3水平垂直居中

css3属性 -webkit-filter(改变模糊度 亮度 透明度等方法)

CSS pointer-events

禁止button按钮的点击与禁止a标签的跳转

样式改变单词的大小写

html title属性内容换行方法

移动端定宽布局，安卓上文字变大了解决办法

HTML5:input file控件限制上传文件类型

去掉input聚焦,点击a标签，出现的外虚线框

CSS3 calc中使用vw让overflow:auto页面滚动条出现时不跳动

Chrome、Safari等浏览器，当表单提交用户选择记住密码后，下次自动填充表单的背景变成黄色，影响了视觉体验是否可以修改？

meta相关知识

H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

忽略将页面中的数字识别为电话号码

忽略Android平台中对邮箱地址的识别

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari

将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

总结可能用到的meta标签

移动端viewport模板

移动端问题总结

移动端如何定义字体font-family

移动端touch事件(区分webkit 和 winphone)

移动端click事件有300 ms的延迟响应问题

触摸事件的响应顺序

清除IOS系统手机对input等表单元素的默认样式

CSS美化Placeholder提示信息的样式兼容

webkit表单输入框placeholder的文字能换行么

取消a,button等元素被触摸时产生的半透明灰色遮罩或者虚线框问题

关闭手机端横屏或者竖屏自动调整字体大小功能

禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

禁止ios和android用户选中文字

如何禁止移动端浏览器长按对图片弹出保存

打电话发短信，发邮件的怎么实现

移动端实现类似hover效果

开启硬件加速

android 上去掉语音输入按钮

取消input在ios下，输入的时候英文首字母的默认大写

如何阻止windows Phone的默认触摸事件

屏幕旋转的事件和样式

CSS3判断屏幕横屏

IE10（winphone8）表单元素默认外观如何重置

Retina 显示屏的问题

移动端设置滚动条的默认样式

为移动端页面中滑动滚动条的时候，添加惯性效果的方法

移动端实现控制文本行数

设置表格中的td宽度固定`table-layout:fixed`

合并表格边框`border-collapse:collapse`

css3属性 -webkit-filter(改变模糊度亮度透明度等方法)