CSS3中媒體查詢結(jié)合rem布局適配手機屏幕
發(fā)布時間：2019-06-10 16:22:55 作者：佚名 
我要評論
我要評論這篇文章主要介紹了css3中媒體查詢結(jié)合rem布局適配手機屏幕,需要的朋友可以參考下
css3語法: （750px設(shè)計圖的1rem = 100px）
@media only screen and (min-width: 320px) and (max-width: 479px){
html {
font-size: 42.67px !important;
}
}
@media only screen and (min-width: 480px) and (max-width: 639px){
html {
font-size: 64px !important;
}
}
@media only screen and (min-width: 640px) and (max-width: 749px){
html {
font-size: 85.34px !important;
}
}
@media only screen and (min-width: 750px) and (max-width: 959px){
html {
font-size: 100px !important;
}
}
@media only screen and (min-width: 960px) and (max-width: 1241px){
html {
font-size: 128px !important;
}
}
@media only screen and (min-width: 1242px){
html {
font-size: 165.6px !important;
}
}
js控制
（zepto / jQuery）（750px設(shè)計圖的1rem = 100px）
function setFont() {
let window_width = window.innerWidth;
let font_size = parseFloat(window_width / 3.75);
$('html').css('font-size', font_size);
}
$(window).on('resize', function () {
setFont();
});
總結(jié)
以上所述是小編給大家介紹的CSS3中媒體查詢結(jié)合rem布局適配手機屏幕，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
詳解CSS3媒體查詢響應(yīng)式布局bootstrap 框架原理實戰(zhàn)(推薦)
這篇文章主要介紹了詳解CSS3媒體查詢響應(yīng)式布局bootstrap 框架原理實戰(zhàn)(推薦),本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的2020-11-16css3媒體查詢中device-width和width的區(qū)別詳解
這篇文章主要介紹了css3媒體查詢中device-width和width的區(qū)別詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小2020-03-27- 這篇文章主要介紹了css3 響應(yīng)式媒體查詢的示例代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-25
- 這篇文章主要介紹了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
CSS3媒體查詢實現(xiàn)不同寬度的下不同內(nèi)容的展示功能
這篇文章主要介紹了CSS3媒體查詢實現(xiàn)不同寬度的下不同內(nèi)容的展示功能,本章節(jié)我們將為大家演示一些多媒體查詢實例，需要的朋友可以參考下2023-11-27
