個人CSS初始化

時間 2019-11-17

標籤個人 css 初始化欄目 CSS 简体版

原文原文鏈接

一、清除浮動
浮動給咱們的代碼帶來的麻煩，想必不須要多說，咱們會用不少方式來避免這種麻煩，其中我以爲最方便也是兼容性最好的一種是....// 清除浮動
.clearfix{
  zoom: 1;
}
.clearfix:after{
  display: block;
  content: '';
  clear: both;
}


二、垂直水平居中
在css的世界裏水平居中比垂直居中來的簡單一些，通過了多年的演化，依然沒有好的方式來讓元素垂直居中(各類方式各有優缺點，但都不能達到兼容性好，破壞力小的目標)，如下是幾種常見的實現方式絕對定位方式且已知寬高
position: absolute;
top: 50%;
left: 50%;
margin-top: -3em;
margin-left: -7em;
width: 14em;
height: 6em;

絕對定位 ＋ 未知寬高 ＋ translate
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
//須要補充瀏覽器前綴

flex 輕鬆搞定水平垂直居中( 未知寬高)
display: flex;
align-items: center;
justify-content: center;


三、 文本末尾添加省略號
當文本的內容超出容器的寬度的時候，咱們但願在其默認添加省略號以達到提示用戶內容省略顯示的效果。寬度固定，適合單行顯示...
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;


寬度不固定，適合多行以及移動端顯示
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;


四、製造文本的模糊效果
當咱們但願給文本製造一種模糊效果感受的時候，能夠這樣作color: transparent;
text-shadow:0 0 2px rgba(0,0,0,.5);


五、動畫實現簡潔loading效果
咱們來實現一個很是簡潔的loading效果.loading:after{
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  content: '\2026';
  -webkit-animation: ellipsis 2s infinite;
}

// 動畫部分
@-webkit-keyframes ellipsis{
  from{
    width: 2px;
  }
  to{
    width: 15px;
  }
}


六、自定義文本選中樣式
默認狀況下，咱們在網頁上選中文字的時候，會給選中的部分一個深藍色背景顏色(能夠本身拿起鼠標試試)，若是咱們想本身定製被選中的部分的樣式呢？// 注意只能修改這兩個屬性 字體顏色 選中背景顏色

element::selection{
  color: green;
  background-color: pink;
}
element::-moz-selection{
  color: green;
  background-color: pink;
}


七、頂角貼紙效果
有時候咱們會有這樣的需求，在一個列表展現頁面，有一些列表項是新添加的、或者熱度比較高的，就會要求在其上面添加一個貼紙效果的小條就像hexo默認博客的fork me on github那個效果同樣，以下圖。 接下來咱們開始一步步完成最左邊的這個效果
html
<div class="wrap">
  <div class="ribbon">
    <a href="#">Fork me on GitHub</a>
  </div>
</div>

css
/* 外層容器幾本設置  */
.wrap{
  width: 160px;
  height:160px;
  overflow:hidden;
  position: relative;
  background-color: #f3f3f3;
}

.ribbon{
  background-color: #a00;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  /* shadom */
  -webkit-box-shadow: 0 0 10px #888;
  -moz-box-shadow: 0 0 10px #888;
  box-shadow: 0 0 10px #888;
  /* rotate */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  /* position */
  left: -50px;
  top: 40px;
}

.ribbon a{
  border: 1px solid #faa;
  color: #fff;
  display: block;
  font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 1px 0;
  padding: 10px 50px;
  text-align: center;
  text-decoration: none;
  /* shadow */
  text-shadow: 0 0 5px #444;
}


八、input佔位符
當咱們給部分input類型的設置placeholder屬性的時候，有的時候須要修改其默認的樣式。input::-webkit-input-placeholder{
  color: green;
  background-color: #F9F7F7;
  font-size: 14px;
}
input::-moz-input-placeholder{
  color: green;
  background-color: #F9F7F7;
  font-size: 14px;
}
input::-ms-input-placeholder{
  color: green;
  background-color: #F9F7F7;
  font-size: 14px;
}


九、移動端可點擊元素去處默認邊框
在移動端瀏覽器上，當你點擊一個連接或者經過Javascript定義的可點擊元素的時候，會出現藍色邊框，說實話，這是很噁心的，怎麼去掉呢?-webkit-tap-highlight-color: rgba(255,255,255,0);


十、首字下沉
要實現相似word中首字下沉的效果可使用如下代碼element:first-letter{
  float:left;
  color:green;
  font-size:30px;
}

十一、小三角
在不少地方咱們能夠用得上小三角，接下來咱們畫一下四個方向的三角形.triangle{
  /* 基礎樣式 */
  border:solid 10px transparent;
}
/*下*/
.triangle.bottom{
 border-top-color: green;
}
/*上*/
.triangle.top{
 border-bottom-color: green;
}
/*左*/
.triangle.top{
 border-right-color: green;
}
/*右*/
.triangle.top{
 border-left-color: green;
}


能夠看出畫一個小三角很是簡單，只要兩行樣式就能夠搞定，對於方向只要想着畫哪一個方向則設置反方向的樣式屬性就能夠
十二、鼠標手型
通常狀況下，咱們但願在如下元素身上添加鼠標手型a
submit
input[type="iamge"]
input[type="button"]
button
label
selecta[href],input[type='submit'], input[type='image'],input[type='button'], label[for], select, button {
  cursor: pointer;
}


1三、屏蔽Webkit移動瀏覽器中元素高亮效果
在訪問移動網站時，你會發現，在選中的元素周圍會出現一些灰色的框框，使用如下代碼屏蔽這種樣式-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
複製代碼

移動端兼容性問題1.手機旋轉字體會自動調整
*{text-size-adjust:none}
2.click出現點擊區域閃一下
a{-webkit-tap-highlight-color:rgba(0,0,0,0)}
3.textarea,input默認框內有陰影
textarea,input{appearance:none}
4.iOS下默認識別頁面中的電話
<meta name="format-detection" contnent="telephone=no">
5.:active兼容處理
(1)給body添加ontouchstart
(2)document.addEventListener('touchstart',function(){},false)
6.某些圓角實效
background-clip:padding-box;
7.IE10 Inputy有叉號
input:ms-clear{display:none}複製代碼

* {
	margin: 0;
	padding: 0;
	text-decoration: none;
	-webkit-overflow-scrolling: touch !important;
	/*iOS慣性滾動*/
	outline: none;
	-webkit-font-smoothing: antialiased;
	/*字體細長*/
	-moz-osx-font-smoothing: grayscale;
}

body {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	min-width: 900px;
	overflow-x: hidden;
	font-family: "微軟雅黑";
	-webkit-touch-callout: none;
	/*禁用長按頁面時的彈出菜單*/
	-webkit-tap-highlight-color: white;
	box-sizing: border-box;
}

li {
	list-style: none;
}

ul,
ol {
	list-style-type: none;
}

select,
input,
img,
select {
	vertical-align: middle;
}

img {
	border: none;
	display: inline-block
}

i {
	font-style: normal
}

a {
	text-decoration: none;
	-webkit-appearance: none;
}

*:focus {
	outline: none;
}

input,
textarea,
button {
	resize: none;
	-webkit-appearance: none;
	outline: none;
}

input {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

strong {
	font-weight: bold;
}

h3,
h4 {
	font-weight: normal
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: #cecece;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
	color: #cecece;
}

input[type="button"],
input[type="submit"],
input[type="file"],
button {
	cursor: pointer;
	-webkit-appearance: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

.hover-hand {
	cursor: pointer;
	/*懸浮顯示手*/
}


/*禁止選中copy*/

.dont-select {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}


/*float*/

.left {
	float: left;
}

.right {
	float: right;
}

.clearfloat:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	zoom: 1;
	visibility: hidden;
}

.clearfloat {
	zoom: 1;
	clear: both;
}

.clear {
	clear: both;
	zoom: 1;
}

.hide {
	display: none !important;
}

.show {
	display: block;
}


/*font-size*/

.font12 {
	font-size: 12px;
}

.font13 {
	font-size: 13px;
}

.font14 {
	font-size: 14px;
}

.font15 {
	font-size: 15px;
}

.font16 {
	font-size: 16px;
}

.font18 {
	font-size: 18px;
}

.font19 {
	font-size: 19px;
}

.font20 {
	font-size: 20px;
}

.font22 {
	font-size: 22px;
}

.font24 {
	font-size: 24px;
}

.font26 {
	font-size: 26px;
}

.font28 {
	font-size: 28px;
}

.font30 {
	font-size: 30px;
}

.font32 {
	font-size: 32px;
}

.font36 {
	font-size: 36px;
}

.font48 {
	font-size: 48px;
}

.font60 {
	font-size: 60px;
}

.color-white {
	color: white;
}

.color-red {
	color: red;
}

.color-green {
	color: green;
}

.color-black {
	color: black;
}

.cl1685d3 {
	color: #1685D3;
}

.bg1685D3 {
	background: #1685D3;
}

.color-blue {
	color: blue;
}

.color-yellow {
	color: yellow;
}

.color-pink {
	color: pink;
}

.bg-yellow {
	background: yellow;
}

.bg-red {
	background: red;
}

.border-blue {
	border: 1px solid blue;
}

.border-black {
	border: 1px solid black;
}

.border-white {
	border: 1px solid white;
}

.tc {
	text-align: center;
}

.tl {
	text-align: left;
}

.tr {
	text-align: right;
}


/*一行多行顯示省略號*/

.one-line {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	/*clip  修剪文本。*/
}

.more-line {
	display: -webkit-box !important;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}


/*flex*/

.flex {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	flex-flow: row nowrap;
	justify-content: flex-start;
	/*flex-start | flex-end | center | space-between | space-around;*/
	align-items: flex-start;
	/*flex-start | flex-end | center | baseline | stretch;*/
	align-content: flex-start;
	/*flex-start | flex-end | center | space-between | space-around | stretch;*/
	align-self: auto;
}


/*移動端1px*/

.onepx-border:before {
	content: '';
	position: absolute;
	top: 0px;
	left: 0px;
	width: 200%;
	height: 200%;
	border: 1px solid blue;
	transform-origin: 0 0;
	transform: scale(0.5, 0.5);
	box-sizing: border-box;
	border-radius: 10px;
}


/*滾動條樣式*/

::-webkit-scrollbar {
	width: 6px;
	height: 6px
}

::-webkit-scrollbar-track-piece {
	background: #eee;
}

::-webkit-scrollbar-thumb:vertical {
	background: #666;
}複製代碼

第二版：

* {
	margin: 0;
	padding: 0;
	border: 0px;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	/*清除手機tap事件後element 時候出現的一個高亮*/
	text-decoration: none;
	-webkit-overflow-scrolling: touch !important;
	/*iOS慣性滾動*/
	outline: none;
	-webkit-font-smoothing: antialiased;
	/*字體細長*/
	-moz-osx-font-smoothing: grayscale;
}

body {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	min-width: 900px;
	overflow-x: hidden;
	font-family: "微軟雅黑";
	-webkit-touch-callout: none;
	/*禁用長按頁面時的彈出菜單*/
	-webkit-tap-highlight-color: white;
	box-sizing: border-box;
	-webkit-transform: translateZ(0);
	/*CSS開啓硬件加速*/
	-webkit-backface-visibility: hidden;
	/*使用CSS transforms 或者 animations時可能會有頁面閃爍的bug*/
}

li {
	list-style: none;
}

ul,
ol {
	list-style-type: none;
}

select,
input,
img,
select {
	vertical-align: middle;
}

img {
	border: none;
	display: inline-block
}

i {
	font-style: normal
}

a {
	text-decoration: none;
	-webkit-appearance: none;
}

*:focus {
	outline: none;
}

input,
textarea,
button {
	resize: none;
	-webkit-appearance: none;
	/*移除瀏覽器默認的樣式，好比chrome的input默認樣式*/
	outline: none;
}

input {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

strong {
	font-weight: bold;
}

h3,
h4 {
	font-weight: normal
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: #cecece;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
	color: #cecece;
}

input[type="button"],
input[type="submit"],
input[type="file"],
button {
	cursor: pointer;
	-webkit-appearance: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

.hover-hand {
	cursor: pointer;
	/*懸浮顯示手*/
}

.use-3D {
	-webkit-transform: rotateY(60deg);
	/* Chrome, Safari, Opera */
	-webkit-transform-style: preserve-3d;
	/* Chrome, Safari, Opera */
	transform: rotateY(60deg);
	transform-style: preserve-3d;
}

.perspective {
	/*perspective 透視  : 這個屬性的存在決定你看到的元素是2d仍是3d。通常設置在包裹元素的父類上。*/
	perspective: 400px;
}


/*禁止選中copy*/

.dont-select {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}


/*float*/

.left {
	float: left;
}

.right {
	float: right;
}

.clearfloat:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	zoom: 1;
	visibility: hidden;
}

.clearfloat {
	zoom: 1;
	clear: both;
}

.clear {
	clear: both;
	zoom: 1;
}

.hide {
	display: none !important;
}

.show {
	display: block;
}


/*font-size*/

.font12 {
	font-size: 12px;
}

.font13 {
	font-size: 13px;
}

.font14 {
	font-size: 14px;
}

.font15 {
	font-size: 15px;
}

.font16 {
	font-size: 16px;
}

.font18 {
	font-size: 18px;
}

.font19 {
	font-size: 19px;
}

.font20 {
	font-size: 20px;
}

.font22 {
	font-size: 22px;
}

.font24 {
	font-size: 24px;
}

.font26 {
	font-size: 26px;
}

.font28 {
	font-size: 28px;
}

.font30 {
	font-size: 30px;
}

.font32 {
	font-size: 32px;
}

.font36 {
	font-size: 36px;
}

.font48 {
	font-size: 48px;
}

.font60 {
	font-size: 60px;
}

.color-white {
	color: white;
}

.color-red {
	color: red;
}

.color-green {
	color: green;
}

.color-black {
	color: black;
}

.cl1685d3 {
	color: #1685D3;
}

.bg1685D3 {
	background: #1685D3;
}

.color-blue {
	color: blue;
}

.color-yellow {
	color: yellow;
}

.color-pink {
	color: pink;
}

.bg-yellow {
	background: yellow;
}

.bg-red {
	background: red;
}

.border-blue {
	border: 1px solid blue;
}

.border-black {
	border: 1px solid black;
}

.border-white {
	border: 1px solid white;
}

.tc {
	text-align: center;
}

.tl {
	text-align: left;
}

.tr {
	text-align: right;
}


/*一行多行顯示省略號*/

.one-line {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	/*clip  修剪文本。*/
}

.more-line {
	display: -webkit-box !important;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.auto-gp {
	/*自動換行*/
	word-wrap: break-word;
	word-break: normal;
}


/*flex*/

.flex {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	flex-flow: row nowrap;
	justify-content: flex-start;
	/*flex-start | flex-end | center | space-between | space-around;*/
	align-items: flex-start;
	/*flex-start | flex-end | center | baseline | stretch;*/
	align-content: flex-start;
	/*flex-start | flex-end | center | space-between | space-around | stretch;*/
	align-self: auto;
}


/*移動端1px*/

.onepx-border:before {
	content: '';
	position: absolute;
	top: 0px;
	left: 0px;
	width: 200%;
	height: 200%;
	border: 1px solid blue;
	transform-origin: 0 0;
	transform: scale(0.5, 0.5);
	box-sizing: border-box;
	border-radius: 10px;
}


/*滾動條樣式*/

::-webkit-scrollbar {
	width: 6px;
	height: 6px
}

::-webkit-scrollbar-track-piece {
	background: #eee;
}

::-webkit-scrollbar-thumb:vertical {
	background: #666;
}
複製代碼

解決img元素底部會出現的空白

空白的出現javascript

作網頁設計就避免不了在網頁中添加圖片，一些炫酷的圖片能夠是你的網頁增色很多。對於如何在網頁裏添加一個圖片，你們都已經很清楚了，使用< img >標籤就好了。
今天咱們來看看在添加圖片過程當中出現的一個小問題。爲什麼圖片的底部會出現一個空白間隙呢。
請點擊查看代碼：php

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div style="border: 1px solid red;">
    <!-- 請自行刪掉img前的空格 -->
    < img src="http://img6.cache.netease.com/henan/2015/5/11/2015051117081131913_500.jpg" alt=""> 
  </div>
</body>
</html>複製代碼

很簡單的代碼對嗎?但是它展示的效果會是咱們所但願嗎？請看頁面的效果：
css

示例1.pnghtml

空白出現的緣由前端

< img >等inline元素默認是和父級元素的 baseline 對齊的，即：vertical-align 的默認值是 baseline；而 baseline 又和父級底邊 bottom 有必定距離。
也就是說，< img >元素的底部只到達下圖中藍線的位置。
所以，圖片底部的迷之空白其實是baseline和bottom之間的這段距離。html5

baseline.pngjava

解決空白的出現jquery

既然知道了空白出現的緣由，那麼咱們怎麼解決這個問題呢？
有三種方法：android

設置圖片的 vertical-alignios
```
img{
  vertical-align: bottom;
}複製代碼
```
設置vertical-align的三個值（top、bottom、middle）中的任何一個均可以解決。
設置圖片父層元素的 font-size 爲 0
```
div{
  font-size: 0;
}複製代碼
```
把圖片的 display 設置爲 block
```
img{
  display: block;
}複製代碼
```
解決後的效果展現：

示例2.png

小結

inline元素默認是和父級元素的baseline對齊的。
圖片底部的迷之空白其實是baseline和bottom之間的這段距離。
咱們能夠經過設置一些css樣式避免這個空白的出現。

參考資料

以上是對於圖片底部出現空白問題的一些思考和整理，若有不足之處，還請多多指正教導。

移動端web開發技巧

這是一個最好的時代，由於咱們站在潮流中；但也是一個最壞的時代，由於咱們站在潮頭上。

META相關1. 添加到主屏後的標題（IOS）

<meta name="apple-mobile-web-app-title" content="標題"> 
複製代碼

2. 啓用 WebApp 全屏模式（IOS）

當網站添加到主屏幕後再點擊進行啓動時，可隱藏地址欄（從瀏覽器跳轉或輸入連接進入並無此效果）

<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-touch-fullscreen" content="yes" /> 
複製代碼

3. 百度禁止轉碼

經過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，往你頁面貼上它的廣告，很是之噁心。不過咱們能夠經過這個meta標籤來禁止它：

<meta http-equiv="Cache-Control" content="no-siteapp" />
複製代碼

百度SiteApp轉碼聲明

4. 設置狀態欄的背景顏色（IOS）

設置狀態欄的背景顏色，只有在 "apple-mobile-web-app-capable" content="yes" 時生效

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 
複製代碼

content 參數：

default ：狀態欄背景是白色。
black ：狀態欄背景是黑色。
black-translucent ：狀態欄背景是半透明。若是設置爲 default 或 black ,網頁內容從狀態欄底部開始。若是設置爲 black-translucent ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。

5. 移動端手機號碼識別（IOS）

在 iOS Safari （其餘瀏覽器和Android均不會）上會對那些看起來像是電話號碼的數字處理爲電話連接，好比：

7位數字，形如：1234567
帶括號及加號的數字，形如：(+86)123456789
雙鏈接線的數字，形如：00-00-00111
11位數字，形如：13800138000

可能還有其餘類型的數字也會被識別。咱們能夠經過以下的meta來關閉電話號碼的自動識別：

<meta name="format-detection" content="telephone=no" />
複製代碼

開啓電話功能

<a href="tel:123456">123456</a>
複製代碼

開啓短信功能：

<a href="sms:123456">123456</a> 
複製代碼

6. 移動端郵箱識別（Android）

與電話號碼的識別同樣，在安卓上會對符合郵箱格式的字符串進行識別，咱們能夠經過以下的meta來管別郵箱的自動識別：

<meta content="email=no" name="format-detection" /> 
複製代碼

一樣地，咱們也能夠經過標籤屬性來開啓長按郵箱地址彈出郵件發送的功能：

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a> 複製代碼

7. 添加智能 App 廣告條 Smart App Banner（IOS 6+ Safari）

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
複製代碼

8. IOS Web app啓動動畫

因爲iPad 的啓動畫面是不包括狀態欄區域的。因此啓動圖片須要減去狀態欄區域所對應的方向上的20px大小，相應地在retina設備上要減去40px的大小

<!-- iPhone -->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) -->
<link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (portrait) -->
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
<!-- iPad (landscape) -->
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
<!-- iPad (Retina, portrait) -->
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (Retina, landscape) -->
<link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
複製代碼

（landscape：橫屏 | portrait：豎屏）

9. 添加到主屏後的APP圖標

指定web app添加到主屏後的圖標路徑，有兩種略微不一樣的方式：

<!-- 設計原圖 -->
<link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed">
<!-- 添加高光效果 -->
<link href="short_cut_114x114.png" rel="apple-touch-icon">
複製代碼

apple-touch-icon：在IOS6及如下的版本會自動爲圖標添加一層高光效果（IOS7開始已使用扁平化的設計風格）
apple-touch-icon-precomposed：使用「設計原圖圖標」

效果：

圖標尺寸：

可經過指定size屬性來爲不一樣的設備提供不一樣的圖標（但一般來講，咱們只需提供一個114 x 114 pixels大小的圖標便可）

官方說明以下

Create different sizes of your app icon for different devices. If you’re creating a universal app, you need to supply app icons in all four sizes.

For iPhone and iPod touch both of these sizes are required:

57 x 57 pixels

114 x 114 pixels (high resolution)

For iPad, both of these sizes are required:

72 x 72 pixels

144 x 144 (high resolution)
複製代碼

10. 優先使用最新版本 IE 和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
複製代碼

11.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">
<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>標題</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
這裏開始內容
</body>
</html>
複製代碼

常見問題一、移動端如何定義字體font-family

三大手機系統的字體：

ios 系統

默認中文字體是Heiti SC
默認英文字體是Helvetica
默認數字字體是HelveticaNeue
無微軟雅黑字體

android 系統

默認中文字體是Droidsansfallback
默認英文和數字字體是Droid Sans
無微軟雅黑字體

winphone 系統

默認中文字體是Dengxian(方正等線體)
默認英文和數字字體是Segoe
無微軟雅黑字體

各個手機系統有本身的默認字體，且都不支持微軟雅黑
如無特殊需求，手機端無需定義中文字體，使用系統默認
英文字體和數字字體可以使用 Helvetica ，三種系統都支持

* 移動端定義字體的代碼 */
body{font-family:Helvetica;}
複製代碼

二、移動端字體單位font-size選擇px仍是rem

對於只須要適配手機設備，使用px便可

對於須要適配各類移動設備，使用rem，例如只須要適配iPhone和iPad等分辨率差異比較挺大的設備

rem配置參考：

html {font-size:10px}
@media screen and (min-width:480px) and (max-width:639px) {
    html {
        font-size: 15px
    }
}
@media screen and (min-width:640px) and (max-width:719px) {
    html {
        font-size: 20px
    }
}
@media screen and (min-width:720px) and (max-width:749px) {
    html {
        font-size: 22.5px
    }
}
@media screen and (min-width:750px) and (max-width:799px) {
    html {
        font-size: 23.5px
    }
}
@media screen and (min-width:800px) and (max-width:959px) {
    html {
        font-size: 25px
    }
}
@media screen and (min-width:960px) and (max-width:1079px) {
    html {
        font-size: 30px
    }
}
@media screen and (min-width:1080px) {
    html {
        font-size: 32px
    }
}
複製代碼

三、移動端touch事件(區分webkit 和 winphone)

當用戶手指放在移動設備在屏幕上滑動會觸發的touch事件

如下支持webkit

touchstart——當手指觸碰屏幕時候發生。無論當前有多少隻手指
touchmove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用event的preventDefault()能夠阻止默認狀況的發生：阻止頁面滾動
touchend——當手指離開屏幕時觸發
touchcancel——系統中止跟蹤觸摸時候會觸發。例如在觸摸過程當中忽然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用

如下支持winphone 8

MSPointerDown——當手指觸碰屏幕時候發生。無論當前有多少隻手指
MSPointerMove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用css的html{-ms-touch-action: none;}能夠阻止默認狀況的發生：阻止頁面滾動
MSPointerUp——當手指離開屏幕時觸發

四、移動端click屏幕產生200-300 ms的延遲響應

移動設備上的web網頁是有300ms延遲的，玩玩會形成按鈕點擊延遲甚至是點擊失效。

如下是歷史緣由：

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延遲
zepto的touch模塊，tap事件也是爲了解決在click的延遲問題

觸摸事件的響應順序

一、ontouchstart 
二、ontouchmove 
三、ontouchend 
四、onclick
複製代碼

解決300ms延遲的問題，也能夠經過綁定ontouchstart事件，加快對事件的響應

五、什麼是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}
複製代碼

六、ios系統中元素被觸摸時產生的半透明灰色遮罩怎麼去掉

ios用戶點擊一個連接，會出現一個半透明灰色遮罩, 若是想要禁用，可設置-webkit-tap-highlight-color的alpha值爲0，也就是屬性值的最後一位設置爲0就能夠去除半透明灰色遮罩

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0)}
複製代碼

七、部分android系統中元素被點擊時產生的邊框怎麼去掉

android用戶點擊一個連接，會出現一個邊框或者半透明灰色遮罩, 不一樣生產商定義出來額效果不同，可設置-webkit-tap-highlight-color的alpha值爲0去除部分機器自帶的效果

a,button,input,textarea{
    -webkit-tap-highlight-color: rgba(0,0,0,0)
    -webkit-user-modify:read-write-plaintext-only; 
}
複製代碼

-webkit-user-modify有個反作用，就是輸入法再也不可以輸入多個字符

另外，有些機型去除不了，如小米2

對於按鈕類還有個辦法，不使用a或者input標籤，直接用div標籤

八、winphone系統a、input標籤被點擊時產生的半透明灰色背景怎麼去掉

<meta name="msapplication-tap-highlight" content="no">
複製代碼

九、webkit表單元素的默認外觀怎麼重置

.css{-webkit-appearance:none;}
複製代碼

十、webkit表單輸入框placeholder的顏色值能改變麼

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
複製代碼

十一、webkit表單輸入框placeholder的文字能換行麼

ios能夠，android不行~

12. 關閉iOS鍵盤首字母自動大寫

在iOS中，默認狀況下鍵盤是開啓首字母大寫的功能的，若是啓用這個功能，能夠這樣：

<input type="text" autocapitalize="off" />
複製代碼

13. 關閉iOS輸入自動修正

和英文輸入默認自動首字母大寫那樣，IOS還作了一個功能，默認輸入法會開啓自動修正輸入內容，這樣的話，用戶常常要操做兩次。若是不但願開啓此功能，咱們能夠經過input標籤屬性來關閉掉：

<input type="text" autocorrect="off" /> 
複製代碼

14. 禁止文本縮放

當移動設備橫豎屏切換時，文本的大小會從新計算，進行相應的縮放，當咱們不須要這種狀況時，能夠選擇禁止：

html {
　　        -webkit-text-size-adjust: 100%;
}
複製代碼

須要注意的是，PC端的該屬性已經被移除，該屬性在移動端要生效，必須設置 `meta viewport’。

15. 移動端如何清除輸入框內陰影

在iOS上，輸入框默認有內部陰影，但沒法使用 box-shadow 來清除，若是不須要陰影，能夠這樣關閉：

input,
textarea {
　　border: 0; /* 方法1 */
　　-webkit-appearance: none; /* 方法2 */
}
複製代碼

16. 快速回彈滾動

咱們先來看看回彈滾動在手機瀏覽器發展的歷史：

早期的時候，移動端的瀏覽器都不支持非body元素的滾動條，因此通常都藉助 iScroll;
Android 3.0/iOS解決了非body元素的滾動問題，但滾動條不可見，同時iOS上只能經過2個手指進行滾動；
Android 4.0解決了滾動條不可見及增長了快速回彈滾動效果，不過隨後這個特性又被移除；
iOS從5.0開始解決了滾動條不可見及增長了快速回彈滾動效果

在iOS上若是你想讓一個元素擁有像 Native 的滾動效果，你能夠這樣作：

.xxx {
    overflow: auto; /* auto | scroll */
    -webkit-overflow-scrolling: touch;
}
複製代碼

PS：iScroll用過以後感受不是很好，有一些詭異的bug，這裏推薦另一個 iDangero Swiper，這個插件集成了滑屏滾動的強大功能（支持3D），並且還有回彈滾動的內置滾動條，官方地址：

iDangero

17. 移動端禁止選中內容

若是你不想用戶能夠選中頁面中的內容，那麼你能夠在css中禁掉：

.user-select-none {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all （移動端不須要） */
  -ms-user-select: none;      /* IE 10+ */      
}
複製代碼

18. 移動端取消touch高亮效果

在作移動端頁面時，會發現全部a標籤在觸發點擊時或者全部設置了僞類 :active 的元素，默認都會在激活狀態時，顯示高亮框，若是不想要這個高亮，那麼你能夠經過css如下方法來進行全局的禁止：

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
複製代碼

但這個方法在三星的機子上無效，有一種妥協的方法是把頁面非真實跳轉連接的a標籤換成其它標籤，能夠解決這個問題。

19. 如何禁止保存或拷貝圖像（IOS）

一般當你在手機或者pad上長按圖像 img ，會彈出選項存儲圖像或者拷貝圖像，若是你不想讓用戶這麼操做，那麼你能夠經過如下方法來禁止：

img { -webkit-touch-callout: none; }
複製代碼

20.模擬按鈕hover效果

移動端觸摸按鈕的效果，可明示用戶有些事情正要發生，是一個比較好體驗，可是移動設備中並無鼠標指針，使用css的hover並不能知足咱們的需求，還好國外有個激活css的active效果，代碼以下，

<!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">
<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">
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue:active{background-color: #357AE8;}
</style>
</head>
<body>

<div class="btn-blue">按鈕</div>

<script type="text/javascript">
document.addEventListener("touchstart", function(){}, true)
</script>
</body>
</html>
複製代碼

兼容性ios5+、部分android 4+、winphone 8

要作到全兼容的辦法，可經過綁定ontouchstart和ontouchend來控制按鈕的類名

<!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">
<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">
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue-on{background-color: #357AE8;}
</style>
</head>
<body>

<div class="btn-blue">按鈕</div>

<script type="text/javascript">
var btnBlue = document.querySelector(".btn-blue");
btnBlue.ontouchstart = function(){
    this.className = "btn-blue btn-blue-on"
}
btnBlue.ontouchend = function(){
    this.className = "btn-blue"
}
</script>
</body>
</html>
複製代碼

21.屏幕旋轉的事件和樣式

事件

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;
            }
} 
複製代碼

樣式

//豎屏時使用的樣式
@media all and (orientation:portrait) {
    .css{}
}

//橫屏時使用的樣式
@media all and (orientation:landscape) {
    .css{}
}
複製代碼

22.audio元素和video元素在ios和andriod中沒法自動播放

應對方案：觸屏即播

$('html').one('touchstart',function(){
    audio.play()
})
複製代碼

23.搖一搖功能

HTML5 deviceMotion：封裝了運動傳感器數據的事件，能夠獲取手機運動狀態下的運動加速度等數據。

24.手機拍照和上傳圖片

<input type="file">的accept 屬性

<!-- 選擇照片 -->
<input type=file accept="image/*">
<!-- 選擇視頻 -->
<input type=file accept="video/*">
複製代碼

使用總結：

ios 有拍照、錄像、選取本地圖片功能
部分android只有選取本地圖片功能
winphone不支持
input控件默認外觀醜陋

25. 消除transition閃屏

.css{
    /*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/
    -webkit-transform-style: preserve-3d;
    /*（設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）*/
    -webkit-backface-visibility: hidden;
}
複製代碼

開啓硬件加速

解決頁面閃白

保證動畫流暢

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

設計高性能CSS3動畫的幾個要素

儘量地使用合成屬性transform和opacity來設計CSS3動畫，
不使用position的left和top來定位
利用translate3D開啓GPU加速

26. android 上去掉語音輸入按鈕

input::-webkit-input-speech-button {display: none}
複製代碼

框架1. 移動端基礎框架

zepto.js 語法與jquery幾乎同樣，會jquery基本會zepto~
iscroll.js 解決頁面不支持彈性滾動，不支持fixed引發的問題~ 實現下拉刷新，滑屏，縮放等功能~
underscore.js 該庫提供了一整套函數式編程的實用功能，可是沒有擴展任何JavaScript內置對象。
fastclick 加快移動端點擊響應時間
animate.css CSS3動畫效果庫
Normalize.css Normalize.css是一種現代的、CSS reset爲HTML5準備的優質替代方案

2. 滑屏框架

適合上下滑屏、左右滑屏等滑屏切換頁面的效果

3.瀑布流框架

masonry

工具推薦

caniuse 各瀏覽器支持html5屬性查詢
paletton 調色搭配

1. 個人CSS初始化
2. css初始化
3. CSS初始化
4. 初始化CSS
5. 個人swiper初始化
6. 10.css初始化
7. CSS初始化樣式
8. 初始化css文件
9. CSS初始化樣式表
10. 移動端 css初始化
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 再有人問你分佈式事務，把這篇扔給他
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。