CSS3媒體查詢實現(xiàn)不同寬度的下不同內(nèi)容的展示功能

前言
CSS3 多媒體查詢實例
本章節(jié)我們將為大家演示一些多媒體查詢實例。
開始之前我們先制作一個電子郵箱的鏈接列表。HTML 代碼如下:
<!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; } ul li a { color: green; text-decoration: none; padding: 3px; display: block; } </style> </head> <body> <ul> <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li > <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li > <li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a>< /li> </ul> </body> </html>
注意 data-email 屬性。在 HTML 中我們可以使用帶 data- 前綴的屬性來存儲信息。
520 到 699px 寬度 - 添加郵箱圖標(biāo)
當(dāng)瀏覽器的寬度在 520 到 699px, 郵箱鏈接前添加郵件圖標(biāo):
@media screen and (max-width: 699px) and (min-width: 520px) { ul li a { padding-left: 30px; background: url(email-icon.png) left center no-repeat; } }
700 到 1000px - 添加文本前綴信息
當(dāng)瀏覽器的寬度在 700 到 1000px, 會在郵箱鏈接前添加 "Email: ":
@media screen and (max-width: 1000px) and (min-width: 700px) { ul li a:before { content: "Email: "; font-style: italic; color: #666666; } }
大于 1001px 寬度 - 添加郵件地址
當(dāng)瀏覽器的寬度大于 1001px 時,會在鏈接后添加郵件地址接。
我們會使用 data- 屬性來為每個人名后添加郵件地址:
@media screen and (min-width: 1001px) { ul li a:after { content: " (" attr(data-email) ")"; font-size: 12px; font-style: italic; color: #666666; } }
大于 1151px 寬度 - 添加圖標(biāo)
當(dāng)瀏覽器的寬度大于 1001px 時,會在人名前添加圖標(biāo)。
實例中,我們沒有編寫額外的查詢塊,我們可以在已有的查詢媒體后使用逗號分隔來添加其他媒體查詢 (類似 OR 操作符):
@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) { ul li a { padding-left: 30px; background: url(email-icon.png) left center no-repeat; } }
代碼
<!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; } ul li a { color: green; text-decoration: none; padding: 3px; display: block; } @media screen and (max-width: 699px) and (min-width: 520px) { ul li a { padding-left: 30px; background: url(email-icon.png) left center no-repeat; } } @media screen and (max-width: 1000px) and (min-width: 700px) { ul li a:before { content: "Email: "; font-style: italic; color: #666666; } } @media screen and (min-width: 1001px) { ul li a:after { content: " (" attr(data-email) ")"; font-size: 12px; font-style: italic; color: #666666; } } @media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) { ul li a { padding-left: 30px; background: url(email-icon.png) left center no-repeat; } } </style> </head> <body> <ul> <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>3 <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li> <li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li> </ul> </body> </html>
后言
到此這篇關(guān)于CSS3媒體查詢實現(xiàn)不同寬度的下不同內(nèi)容的展示的文章就介紹到這了,更多相關(guān)css3媒體查詢內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
詳解CSS3媒體查詢響應(yīng)式布局bootstrap 框架原理實戰(zhàn)(推薦)
這篇文章主要介紹了詳解CSS3媒體查詢響應(yīng)式布局bootstrap 框架原理實戰(zhàn)(推薦),本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的2020-11-16css3媒體查詢中device-width和width的區(qū)別詳解
這篇文章主要介紹了css3媒體查詢中device-width和width的區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小2020-03-27- 這篇文章主要介紹了css3 響應(yīng)式媒體查詢的示例代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-25
- 這篇文章主要介紹了css3中媒體查詢結(jié)合rem布局適配手機屏幕,需要的朋友可以參考下2019-06-10
- 這篇文章主要介紹了CSS3 Media Queries中媒體屬性的使用,文章中還以一個響應(yīng)式設(shè)計的例子作為補充講解,需要的朋友可以參考下2016-02-29
CSS3媒體查詢Media Queries基礎(chǔ)學(xué)習(xí)教程
這篇文章主要介紹了CSS3媒體查詢基本學(xué)習(xí)教程,包括基本的語法和邏輯操作符,以及媒體查詢可檢測的特性與利用viewport禁止用戶縮放等部分的內(nèi)容,需要的朋友可以參考下2016-02-29使用CSS媒體查詢(Media Queries)和JavaScript判斷瀏覽器設(shè)備類型的方法
有無數(shù)的理由要求我們在任何時候都應(yīng)該知道用戶是使用的什么設(shè)備瀏覽我們的網(wǎng)站——寬屏,普通屏,平板,手機?知道這些特征,我們web應(yīng)用的CSS和JavaScript才能同步做相應(yīng)2014-04-03- 媒體類型:all 所有設(shè)備、screen 電腦顯示器等等;媒體特性共13種,可以說是一個類似CSS屬性的集合,感興趣的朋友可以了解下本文,希望對大家有所幫助2013-09-12