## 一、百分比適配
### 1、要點(diǎn)
- 元素的寬度使用了百分比來定寬，根據(jù)屏幕的寬度進(jìn)行自適應(yīng)
- 適合頁面內(nèi)容結(jié)構(gòu)均勻分配,固定高度,結(jié)構(gòu)不是很復(fù)雜,注意要設(shè)置viewport視口內(nèi)容寬度等于設(shè)備的寬度
- 使用百分比定寬的元素，百分比參考的是該元素最近的，定了寬度的父元素
### 2、示例
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>固定高度,寬度自適應(yīng),100%比做適配</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
body{
font-size:16px;
overflow:hidden;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
/*left start*/
.left{
width:40px; /*兩邊固定寬度,中間自適應(yīng)*/
height:40px; /*高度可以不加,由內(nèi)容填充*/
position:absolute;
left:0;
top:0;
background:red;
text-align:center;
line-height:40px;
}
/*left end*/
/*center start*/
.center{
width:100%; /*寬度不固定*/
background:orange;
height:40px;
margin-left:40px;
}
.center input{
width:100%;
height:40px;
outline:none;
}
/*center end*/
/*right start*/
.right{
width:40px; /*兩邊固定寬度,中間自適應(yīng)*/
height:40px; /*高度可以不可,由內(nèi)容填充*/
text-align:center;
line-height:40px;
position:absolute;
right:0;
top:0;
background:green;
}
/*right end*/
/*banner adv start*/
.banner{
width:100%;
height:200px;
background:pink;
text-align:center;
line-height:200px;
}
/*banner adv end*/
/*list start*/
.list{
overflow:hidden;
}
.list div{
width:20%;
height:90px;
float:left;
text-align:center;
line-height:90px;
}
.list div:nth-of-type(1){
background:orange;
}
.list div:nth-of-type(2){
background:#80B3FF;
}
.list div:nth-of-type(3){
background:#1BA260;
}
.list div:nth-of-type(4){
background:#F2A196;
}
.list div:nth-of-type(5){
background:#FFCE42;
}
.listTwo{
margin:15px 0 0 0;
}
/*list end*/
/*con start*/
.con{
width:100%;
height:200px;
overflow:hidden; /*子元素使用來浮動(dòng),父元素記得清除浮動(dòng)*/
text-align:center;
line-height:200px;
}
.left-80{
width:80%;
height:100%; /*想要一個(gè)元素在頁面中顯示必須得給元素高度,繼承父元素*/
float:left;
background:#B0E24A;
}
.right-20{
width:20%;
height:100%; /*高度100%,繼承父元素的高度*/
float:right;
background:#6C6863;
}
/*con end*/
</style>
</head>
<body>
<!-- header start -->
<header>
<div class="left">左邊</div>
<div class="center">
<form>
<input type="search" name="">
</form>
</div>
<div class="right">右邊</div>
</header>
<!-- header end -->
<!-- banner adv start -->
<div class="banner">adv</div>
<!-- banner adv end -->
<!-- 列表list start -->
<div class="list">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="list listTwo">
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
<!-- 列表list end -->
<!-- con內(nèi)容開始-->
<div class="con">
<div class="left-80">左邊80%</div>
<div class="right-20">右邊20%</div>
</div>
<!-- con內(nèi)容結(jié)束-->
</body>
</html>
```
## 二、@media 媒體查詢適配
### 1、CSS 語法
#### （1）@media 媒體類型 and （媒體特性）{ 你的樣式 }
```
@media mediatype and|not|only (media feature) {
CSS-Code;
}
```
#### （2）針對(duì)不同的媒體使用不同 stylesheets
```
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
```
### 2、媒體查詢功能
#### （1）最大寬度max-width
“max-width”是媒體特性中最常用的一個(gè)特性，其意思是指媒體類型小于或等于指定的寬度時(shí)，樣式生效。如：
```
@media screen and (max-width:480px){
.ads {
display:none;
}
}
```
上面表示的是：當(dāng)屏幕小于或等于480px時(shí),頁面中的廣告區(qū)塊（.ads）都將被隱藏。
#### （2）最小寬度min-width
“min-width”與“max-width”相反，指的是媒體類型大于或等于指定寬度時(shí)，樣式生效。
```
@media screen and (min-width:900px){
.wrapper {width: 980px;}
}
```
上面表示的是：當(dāng)屏幕大于或等于900px時(shí)，容器“.wrapper”的寬度為980px。
#### （3）多個(gè)媒體特性使用
Media Queries可以使用關(guān)鍵詞"and"將多個(gè)媒體特性結(jié)合在一起。也就是說，一個(gè)Media Query中可以包含0到多個(gè)表達(dá)式，表達(dá)式又可以包含0到多個(gè)關(guān)鍵字，以及一種媒體類型。
當(dāng)屏幕在600px~900px之間時(shí)，body的背景色渲染為“#f5f5f5”，如下所示。
```
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}
```
#### （4）設(shè)備屏幕的輸出寬度Device Width
在智能設(shè)備上，例如iPhone、iPad等，還可以根據(jù)屏幕設(shè)備的尺寸來設(shè)置相應(yīng)的樣式（或者調(diào)用相應(yīng)的樣式文件）。同樣的，對(duì)于屏幕設(shè)備同樣可以使用“min/max”對(duì)應(yīng)參數(shù)，如“min-device-width”或者“max-device-width”。
```
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
```
上面的代碼指的是“iphone.css”樣式適用于最大設(shè)備寬度為480px，比如說iPhone上的顯示，這里的“max-device-width”所指的是設(shè)備的實(shí)際分辨率，也就是指可視面積分辨率。
#### （5）not關(guān)鍵詞
使用關(guān)鍵詞“not”是用來排除某種制定的媒體類型，也就是用來排除符合表達(dá)式的設(shè)備。換句話說，not關(guān)鍵詞表示對(duì)后面的表達(dá)式執(zhí)行取反操作，如：
```
@media not print and (max-width: 1200px){樣式代碼}
```
上面代碼表示的是：樣式代碼將被使用在除打印設(shè)備和設(shè)備寬度小于1200px下所有設(shè)備中。
#### （6）only關(guān)鍵詞
only用來指定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器。其實(shí)only很多時(shí)候是用來對(duì)那些不支持Media Query但卻支持Media Type的設(shè)備隱藏樣式表的。
其主要有：支持媒體特性的設(shè)備，正常調(diào)用樣式，此時(shí)就當(dāng)only不存在；表示不支持媒體特性但又支持媒體類型的設(shè)備，這樣就會(huì)不讀樣式，因?yàn)槠湎葧?huì)讀取only而不是screen；另外不支持Media Queries的瀏覽器，不論是否支持only，樣式都不會(huì)被采用。如
```
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />
```
在Media Query中如果沒有明確指定Media Type，那么其默認(rèn)為all，如：
```
<link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />
```
另外在樣式中，還可以使用多條語句來將同一個(gè)樣式應(yīng)用于不同的媒體類型和媒體特性中，指定方式如下所示。
```
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
```
### 3、移動(dòng)端適配用法
```
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
/*iphone4*/
@media only screen and (min-width: 320px) and (max-width: 480px) {
html, body {
font-size: 12px;
}
.title {
background-color: red;
}
}
/*iphone5*/
@media only screen and (min-width: 320px) and (max-width: 568px) {
html,body {
font-size: 14px;
}
.title {
background-color: blue;
}
}
/*ihpne6,7,8*/
@media only screen and (min-width: 375px) and (max-width: 413px) {
html,body {
font-size: 16px;
}
.title {
background-color: green;
}
}
/*ihpne6,7,8Plus*/
@media only screen and (min-width: 414px) and (max-width: 640px) {
html,body {
font-size: 18px;
}
.title {
background-color: pink;
}
}
```
## 三、Flex布局適配
- 適合頁面內(nèi)容結(jié)構(gòu)均勻分配,固定高度,需要設(shè)置viewport視口內(nèi)容寬度等于設(shè)備寬度
- 老版本的display:box與新版本的display:flex都可以實(shí)現(xiàn)頁面的自適應(yīng)
### 1、新老版本語法對(duì)比
### 2、示例
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>Flex布局適配</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
body{
font-family:"微軟雅黑";
font-size:16px;
}
.parent{
display:-webkit-flex; /*聲明彈性盒模型*/
display:flex;
}
.left,.right{
width:40px;
height:40px;
text-align:center;
line-height:40px;
}
.left{
background:#abcdef;
}
.right{
background:#DD4F43;
}
.center{
-webkit-flex:1; /*一定要注意加上瀏覽器前綴,否則就會(huì)失效*/
flex:1;
}
.center input{
width:100%;
height:40px;
outline:none;
}
.banner-adv{
width:100%;
height:200px;
display:-webkit-box;
display:box;
background:#0D6CB0;
}
.list{
width:100%;
height:90px;
display:-webkit-flex;
display:flex;
}
.list div{
-webkit-flex:1;
flex:1;
text-align:center;
line-height:90px;
}
.list div:nth-of-type(1){
background:#DE5246;
}
.list div:nth-of-type(2){
background:#19A25F;
}
.list div:nth-of-type(3){
background:#FF8080;
}
.list div:nth-of-type(4){
background:#F4CD0B;
}
.list div:nth-of-type(5){
background:#9EDA45;
}
.list-Two{
margin:15px 0 0 0;
}
.list-Two div:nth-of-type(1){
background:#B847FF;
}
.list-Two div:nth-of-type(2){
background:#79B900;
}
.list-Two div:nth-of-type(3){
background:#FF2424;
}
.list-Two div:nth-of-type(4){
background:#D2E4F0;
}
.list-Two div:nth-of-type(5){
background:#4CDF2B;
}
.con{
height:200px;
display:-webkit-flex; /*聲明彈性盒模型*/
display:flex;
}
.con div:nth-of-type(1){
-webkit-flex:8; /*根據(jù)父元素分成8等分,占80%*/
flex:8;
background:#80B3FF;
}
.con div:nth-of-type(2){
-webkit-flex:2; /*根據(jù)父元素分成2等分,占20%*/
flex:2;
background:#CD8B37;
}
</style>
</head>
<body>
<header class="parent">
<div class="left">左邊</div>
<div class="center">
<form>
<input type="search" name="">
</form>
</div>
<div class="right">右邊</div>
</header>
<div class="banner-adv"></div>
<section class="list">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
<section class="list list-Two">
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>9</div>
</section>
<div class="con">
<div></div>
<div></div>
</div>
</body>
</html>
```
## 四、動(dòng)態(tài) rem 方案
### 1、rem/em/vw/vh的比較
#### （1）em
**em作為font-size的單位時(shí)，其代表父元素的字體大小，em作為其他屬性單位時(shí)，代表自身字體大小——MDN**
比如父元素font-size:12px;
自身元素如果寫成：font-sise:2em;則自身元素用px表示就是24px（相對(duì)父元素字體大?。?
但是自身元素設(shè)置：width:2em,那么自身元素用px表示就是48px（相對(duì)自身字體大?。?；
#### （2）rem
**rem作用于非根元素時(shí)，相對(duì)于根元素字體大?。籸em作用于根元素字體大小時(shí)，相對(duì)于其出初始字體大小——MDN**
比如根元素（html）設(shè)置font-size=12px; 非根元素設(shè)置width:2rem;則換成px表示就是24px；
如果根元素設(shè)置成font-size=1rem;則根元素?fù)Q成px就是相對(duì)于初始字體大小，一般是12px；
#### （3）vw/vh
**vw ： 視口寬度的 1/100；vh ：視口高度的 1/100 —— MDN**
在pc端，視口寬高就是瀏覽器得寬高；
在移動(dòng)端，這個(gè)還不太一樣，不過一般設(shè)置：
```
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
```
代碼以顯示網(wǎng)頁的屏幕寬度定義了視窗寬度。網(wǎng)頁的比例和最大比例被設(shè)置為100%。
### 2、剖析rem布局原理
其實(shí)好好理解上面的概念，rem的原理也就很簡(jiǎn)單了。
假設(shè)我們將**屏幕平局分為10份**，每一份寬度用一個(gè)a表示，即**a=屏幕寬度/10**，那么：
```
div {width: 5a} /* 屏幕寬度的50% */
```
但是css中沒有a這個(gè)單位，這時(shí)我們可以借助rem代替上面的a。如：
```
html {font-size: 12px}
div {width: 2rem} /* 24px*/
html {font-size: 16px}
div {width: 2rem} /* 32px*/
```
新的問題來？怎么讓html元素字體大小恒等于屏幕的1/10呢？如ipone6寬是375px,font-size:37.5px;
```
html {fons-size: width / 10}
div {width: 5rem} /* 5rem = 5a = 屏幕寬度的50% */
```
我們用js很容易動(dòng)態(tài)的設(shè)置html的font-size恒等屏幕的1/10;我們可以在頁面dom ready、resize和屏幕旋轉(zhuǎn)中設(shè)置：
```
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
```
如何把設(shè)計(jì)稿的像素單位換成以rem為單位？可以用一個(gè)比例來計(jì)算：如設(shè)計(jì)稿寬度為750px，某個(gè)元素量得75px，那么：
75px/750px = 計(jì)算所得rem/10rem,所以計(jì)算所得rem=75px;所以我們?cè)跇邮街袑憌idth:1rem；實(shí)際寬度是75px；同理，如果設(shè)計(jì)稿總寬度是640px,則1rem=64px。
預(yù)處理函數(shù)可以簡(jiǎn)化：
```
$ue-width: 750; /* 設(shè)計(jì)稿圖的寬度 */
@function px2rem($px) {
@return #{$px/$ue-width*10}rem;
}
div {
width: px2rem(100);/*編譯后： p{width:1.5625rem}*/
}
```
### 3、rem布局方案
rem是一種彈性布局，它強(qiáng)調(diào)等比縮放，100%還原。它和響應(yīng)式布局不一樣，響應(yīng)式布局強(qiáng)調(diào)不同屏幕要有不同的顯示，比如媒體查詢。
最佳方案：**rem+flexbox+js的方案**
實(shí)現(xiàn)步驟：
- 引入相關(guān)flexible.js文件
- 根據(jù)設(shè)計(jì)圖計(jì)算元素rem值
- 切換不同移動(dòng)端視窗查看效果
#### 示例1：網(wǎng)易考拉
地址：[https://m.kaola.com/](https://m.kaola.com/)
```
(function(win) {
var remCalc = {};
var docEl = win.document.documentElement,
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (width > 640) {
width = 640
}
var rem = width / 10;
docEl.style.fontSize = rem + "px";
remCalc.rem = rem;
var actualSize = parseFloat(window.getComputedStyle(document.documentElement)["font-size"]);
if (actualSize !== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) {
var remScaled = rem * rem / actualSize;
docEl.style.fontSize = remScaled + "px"
}
}
function dbcRefresh() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 100)
}
win.addEventListener("resize",
function() {
dbcRefresh()
},
false);
win.addEventListener("pageshow",
function(e) {
if (e.persisted) {
dbcRefresh()
}
},
false);
refreshRem();
remCalc.refreshRem = refreshRem;
remCalc.rem2px = function(d) {
var val = parseFloat(d) * this.rem;
if (typeof d === "string" && d.match(/rem$/)) {
val += "px"
}
return val
};
remCalc.px2rem = function(d) {
var val = parseFloat(d) / this.rem;
if (typeof d === "string" && d.match(/px$/)) {
val += "rem"
}
return val
};
win.remCalc = remCalc
})(window); (function(win, doc) {
var type = navigator.userAgent.match(/(iPhone|iPod|iPad)/i) ? "ios": "aos";
win.deviceType = type
})(window, document);
```
#### 示例2：
```
;(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 750) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
```
## 五、 css實(shí)現(xiàn)單行、多行文本超出顯示省略號(hào)
### 1、單行文本省略
```
<p class="ellipsis-line">在使用的時(shí)候，有時(shí)候發(fā)現(xiàn)不會(huì)出現(xiàn)省略標(biāo)記效果，經(jīng)過測(cè)試發(fā)現(xiàn)，使用ellipsis的時(shí)候，必須配合overflow:hidden; white-space:nowrap; width:具體值;這三個(gè)樣式共同使用才會(huì)有效果。</p>
.ellipsis-line {
border: 1px solid #f70505;
padding: 8px;
width: 400px;
overflow: hidden;
text-overflow: ellipsis; /*文本溢出顯示省略號(hào)*/
white-space: nowrap; /*文本不會(huì)換行*/
}
```
**語法：text-overflow:clip/ellipsis;**
- 默認(rèn)值：clip
- 適用于：所有元素
- clip： 當(dāng)對(duì)象內(nèi)文本溢出時(shí)不顯示省略標(biāo)記（...），而是將溢出的部分裁切掉。
- ellipsis： 當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（...）。
**注**：在使用的時(shí)候，有時(shí)候發(fā)現(xiàn)不會(huì)出現(xiàn)省略標(biāo)記效果，經(jīng)過測(cè)試發(fā)現(xiàn)，使用ellipsis的時(shí)候，必須配合overflow:hidden; white-space:nowrap; width:具體值;這三個(gè)樣式共同使用才會(huì)有效果。
### 2、多行文本省略
#### （1）直接用css屬性-webkit-line-clamp：n;設(shè)置
在WebKit瀏覽器或移動(dòng)端（絕大部分是WebKit內(nèi)核的瀏覽器）的頁面實(shí)現(xiàn)比較簡(jiǎn)單，可以直接使用WebKit的CSS擴(kuò)展屬性(WebKit是私有屬性)-webkit-line-clamp ；注意：這是一個(gè) 不規(guī)范的屬性（unsupported WebKit property），它沒有出現(xiàn)在 CSS 規(guī)范草案中。
-webkit-line-clamp用來限制在一個(gè)塊元素顯示的文本的行數(shù)。 為了實(shí)現(xiàn)該效果，它需要組合其他的WebKit屬性。常見結(jié)合屬性：
- display: -webkit-box; 必須結(jié)合的屬性 ，將對(duì)象作為彈性伸縮盒子模型顯示 。
- -webkit-box-orient 必須結(jié)合的屬性 ，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式 。
- text-overflow: ellipsis;，可以用來多行文本的情況下，用省略號(hào)“…”隱藏超出范圍的文本。
這個(gè)屬性只合適WebKit瀏覽器或移動(dòng)端（絕大部分是WebKit內(nèi)核的）瀏覽器
```
<p class="multi-line">在WebKit瀏覽器或移動(dòng)端（絕大部分是WebKit內(nèi)核的瀏覽器）的頁面實(shí)現(xiàn)比較簡(jiǎn)單，可以直接使用WebKit的CSS擴(kuò)展屬性(WebKit是私有屬性)-webkit-line-clamp ；注意：這是一個(gè) 不規(guī)范的屬性（unsupported WebKit property），它沒有出現(xiàn)在 CSS 規(guī)范草案中。</p>
.multi-line {
border: 1px solid #f70505;
width: 400px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
```
**效果優(yōu)點(diǎn)：**
- 響應(yīng)式截?cái)?，根?jù)不同寬度做出調(diào)整
- 文本超出范圍才顯示省略號(hào)，否則不顯示省略號(hào)
- 瀏覽器原生實(shí)現(xiàn)，所以省略號(hào)位置顯示剛好
但是缺點(diǎn)也是很直接，因?yàn)?-webkit-line-clamp 是一個(gè)不規(guī)范的屬性，它沒有出現(xiàn)在 CSS 規(guī)范草案中。也就是說只有 webkit 內(nèi)核的瀏覽器才支持這個(gè)屬性，像 Firefox, IE 瀏覽器統(tǒng)統(tǒng)都不支持這個(gè)屬性，瀏覽器兼容性不好。
**使用場(chǎng)景**：多用于移動(dòng)端頁面，因?yàn)橐苿?dòng)設(shè)備瀏覽器更多是基于 webkit 內(nèi)核，除了兼容性不好，實(shí)現(xiàn)截?cái)嗟男Ч诲e(cuò)。
#### （2）利用定位和偽類元素
```
p {
position: relative;
width:400px;
line-height: 20px;
max-height: 60px;
overflow: hidden;
}
p::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
```
適合場(chǎng)景：文字內(nèi)容較多，確定文字內(nèi)容一定會(huì)超過容器的，那么選擇這種方式不錯(cuò)。但文字未超出行的情況下也會(huì)出現(xiàn)省略號(hào),可結(jié)合js優(yōu)化該方法。
注：
- 將height設(shè)置為line-height的整數(shù)倍，防止超出的文字露出。
- 給p::after添加漸變背景可避免文字只顯示一半。
- 由于ie6-7不顯示content內(nèi)容，所以要添加標(biāo)簽兼容ie6-7（如：<span>…<span/>）；兼容ie8需要將::after替換成:after。
#### （3）結(jié)合js優(yōu)化代碼
**css:**
```
p {
position: relative;
width: 400px;
line-height: 20px;
overflow: hidden;
}
.p-after:after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -moz-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(left, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
```
**js:**
```
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script>
$(function(){
//獲取文本的行高，并獲取文本的高度，假設(shè)我們規(guī)定的行數(shù)是五行，那么對(duì)超過行數(shù)的部分進(jìn)行限制高度，并加上省略號(hào)
$('p').each(function(i, obj){
var lineHeight = parseInt($(this).css("line-height"));
var height = parseInt($(this).height());
if((height / lineHeight) >3 ){
$(this).addClass("p-after")
$(this).css("height","60px");
}else{
$(this).removeClass("p-after");
}
});
})
</script>
```
- 前言
- 一、css垂直居中的幾種實(shí)現(xiàn)方法
- 二、簡(jiǎn)單說一下盒模型，說下如何利用BFC解決外邊距重疊的問題
- 三、說一說產(chǎn)生塌陷的原因以及清除浮動(dòng)的幾種方法
- 四、偽類和偽元素的區(qū)別？聊一下css選擇器的優(yōu)先級(jí)
- 五、css中的過渡和動(dòng)畫效果了解嗎
- 六、彈性盒模型了解嗎
- 七、簡(jiǎn)單說下BOM和DOM的區(qū)別
- 八、如何解決瀏覽器的兼容性問題？瀏覽器調(diào)優(yōu)都用到過哪些方法
- 九、之前寫過h5嗎？有遇到過哪些兼容性問題？說下怎么解決的
- 十、h5是如何做移動(dòng)端適配的？折行的時(shí)候如何實(shí)現(xiàn)不斷行
- 十一、聊一聊js中實(shí)現(xiàn)數(shù)組拷貝的常用方法
- 十二、聊聊js中的數(shù)據(jù)類型，如何用js實(shí)現(xiàn)一個(gè)對(duì)象的深拷貝
- 十三、偽數(shù)組和數(shù)組的區(qū)別？相互轉(zhuǎn)化的方法有哪些
- 十四、請(qǐng)介紹Js中有哪些循環(huán)遍歷的方法，關(guān)于數(shù)組常用的方法有哪些
- 十五、js中的reduce了解嗎？都用他解決過什么問題
- 十六、事件冒泡和捕獲的執(zhí)行順序了解嗎？什么是事件委托
- 十七、call和apply的區(qū)別是什么？caller和callee的區(qū)別有哪些
- 十八、javascript中的this都有哪些用法
- 十九、怎么理解js中的原型鏈？如何實(shí)現(xiàn)繼承？實(shí)現(xiàn)繼承常用的方式有哪些
- 二十、聊一聊js的作用域和作用域鏈
- 二十一、js的閉包了解嗎？閉包的常見用法說一下
- 二十二、setTimeout和setInterval的運(yùn)行機(jī)制了解嗎
- 二十三、函數(shù)的柯里化了解嗎？說下函數(shù)柯里化應(yīng)用的場(chǎng)景
- 二十四、用js寫一個(gè)ajax的原生實(shí)現(xiàn)方法
- 二十五、js如何實(shí)現(xiàn)跨域？聊一聊你之前用到過的方法
- 二十六、聊一下cookie、session和token三者的區(qū)別及使用
- 二十七、用js實(shí)現(xiàn)一下數(shù)組去重和排序，有哪些方法可以實(shí)現(xiàn)
- 二十八、寫一個(gè)方法，統(tǒng)計(jì)一下html文檔的元素包括元素的數(shù)量
- 二十九、用js實(shí)現(xiàn)一個(gè)省市級(jí)聯(lián)效果
- 三十、用js實(shí)現(xiàn)一個(gè)輪播圖效果，簡(jiǎn)單說下原理
- 三十一、請(qǐng)你實(shí)現(xiàn)一個(gè)大文件上傳和斷點(diǎn)續(xù)傳
- 三十二、什么是模塊化開發(fā)？談下AMD、CMD、CommonJs和ES6的區(qū)別
- 三十三、es6了解嗎？說幾個(gè)常見的新特性，set和weakSet的區(qū)別是什么
- 三十四、解構(gòu)賦值的用法了解嗎？如何實(shí)現(xiàn)對(duì)象和數(shù)組的嵌套和重命名
- 三十五、談?wù)勀銓?duì)promise的用法和理解
- 三十六、談?wù)勀銓?duì)es6中的Generator函數(shù)的認(rèn)識(shí)
- 三十七、談一下async-await的實(shí)現(xiàn)原理
- 三十八、用js實(shí)現(xiàn)一下觀察者模式？簡(jiǎn)單說一下原理
- 三十九、了解JavaScript中的裝飾器嗎？聊一下JS中的getter與setter的用法
- 四十、聊一下正則表達(dá)式里的常見用法