整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
最近項(xiàng)目上有個(gè)需求，就是有一個(gè)網(wǎng)站列表，每個(gè)網(wǎng)站下面要加上一段簡(jiǎn)介，簡(jiǎn)介文字有行數(shù)限制，超出行數(shù)以后后面的文字用省略號(hào)顯示。
.websiteul p {
margin: 5px 3px;
font-size: 14px;
color: #555;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4; /*設(shè)置p元素最大可以顯示4行文字*/
-webkit-box-orient: vertical;
}
<h1>這是標(biāo)題</h1><h1>這是標(biāo)題</h1>點(diǎn)擊文字就會(huì)跳轉(zhuǎn)到鏈接頁(yè)面
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0829%2Fb871e1addf5f8e96f3b390ece2b2da0d.jpg&refer=http%3A%2F%2Ffile02.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640251661&t=bbcdcc55bdac4a792d3f758462f9fd68" width="104" height="142" />覽器的兼容性越來(lái)越好，移動(dòng)端基本是清一色的webkit，經(jīng)常會(huì)用到css的不同尺寸/長(zhǎng)度單位，這里做個(gè)整理。
絕對(duì)單位
px : Pixel 像素
pt : Points 磅
pc : Picas 派卡
in : Inches 英寸
mm : Millimeter 毫米
cm : Centimeter 厘米
q : Quarter millimeters 1/4毫米
相對(duì)單位
% : 百分比
em : Element meter 根據(jù)文檔字體計(jì)算尺寸
rem : Root element meter 根據(jù)根文檔（ body/html ）字體計(jì)算尺寸
ex : 文檔字符“x”的高度
ch : 文檔數(shù)字“0”的的寬度
vh : View height 可視范圍高度
vw : View width 可視范圍寬度
vmin : View min 可視范圍的寬度或高度中較小的那個(gè)尺寸
vmax : View max 可視范圍的寬度或高度中較大的那個(gè)尺寸
運(yùn)算
calc : 四則運(yùn)算
實(shí)例：
h1 { width: calc(100% - 10px + 2rem)單位比例
1in=2.54cm=25.4 mm=101.6q=72pt=6pc=96px
詳細(xì)
絕對(duì)單位
px - Pixel 像素
像素 px 相對(duì)于設(shè)備顯示器屏幕分辨率而言。
div { font-size: 12px }
p { text-indent: 24px }pt Points 磅
1 pt=1/72 英寸
div { font-size: 10pt }
p { height: 100pt }pc Picas 派卡
十二點(diǎn)活字（印刷中使用的），相當(dāng)于我國(guó)新四號(hào)鉛字的尺寸。
div { font-size: 10pc }
p { height: 10pc }in Inches 英寸
div { font-size: 10in }
p { height: 10in }mm Millimeter 毫米
div { font-size: 10mm }
p { height: 10mm }cm Centimeter 厘米
div { font-size: 10cm }
p { height: 10cm }q Quarter millimeters 1/4毫米
div { font-size: 20q }
p { height: 100q }相對(duì)單位
% 百分比
相對(duì)于父元素寬度
<body>
em Element meter 根據(jù)文檔計(jì)算尺寸
相對(duì)于當(dāng)前文檔對(duì)象內(nèi)文本的字體尺寸而言，若未指定字體大小則繼承自上級(jí)元素，以此類推，直至 body，若 body 未指定則為瀏覽器默認(rèn)大小。
<body>
rem Root element meter 根據(jù)根文檔（ body/html ）字體計(jì)算尺寸
相對(duì)于根文檔對(duì)象（ body/html ）內(nèi)文本的字體尺寸而言，若未指定字體大小則繼承為瀏覽器默認(rèn)字體大小。
ex 文檔字符“x”的高度
相對(duì)于字符“x”的高度，通常為字體高度的一半，若未指定字體尺寸，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。
至于為啥是x，我TM也不知道。
ch 文檔數(shù)字“0”的的寬度
同上，相對(duì)于數(shù)字“0”的寬度。
一張圖解釋：
vh View height / vw View Width - 可視范圍
相對(duì)于可視范圍的高度和寬度，可視范圍被均分為 100 單位的 vh/vw；可視范圍是指屏幕可見(jiàn)范圍，不是父元素的，百分比是相對(duì)于包含它的最近的父元素的高度和寬度。
假設(shè)設(shè)備可視范圍為高度 900px，寬度 750px，則， 1 vh=900px/100=9px，1vw=750px/100=7.5px
。
vmin / vmax 可視范圍的寬度或高度中較小/較大的那個(gè)尺寸
假設(shè)瀏覽器的寬度設(shè)置為 1200px，高度設(shè)置為 800px， 則 1vmax=1200/100px=12px， 1vmin=800/100px=8px 。
如果寬度設(shè)置為 600px，高度設(shè)置為 1080px, 則 1vmin=6px, 1vmax=10.8px 。
假設(shè)需要讓一個(gè)元素始終在屏幕上可見(jiàn)：
.box {假設(shè)需要讓這個(gè)元素始終鋪滿整個(gè)視口的可見(jiàn)區(qū)域：
.box {em、rem 是實(shí)際生產(chǎn)中我們最常用到的單位，可以使用其配合媒體查詢改變 body 字體大小來(lái)實(shí)現(xiàn)響應(yīng)式的設(shè)計(jì)，vh、vw、vmin、vmax也可以很方便地幫助我們控制響應(yīng)尺寸，但實(shí)際的可控性可能不如前者，具體按照我們的業(yè)務(wù)需求去實(shí)踐吧！
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
