rem適配所有螢幕大小demo分享
阿新 • • 發佈:2018-12-23
前兩天學習了rem的使用,下面是一個小demo,使頁面能夠根據螢幕大小自行增大和縮小,利用的就是rem的等比縮放~~~發現錯誤請告訴我,謝謝
方案一:
利用css的calc
函式對html元素的font-size大小進行計算,100vw
是viewport
視區的寬度(即瀏覽器內部的可視區域大小,window.innerWidth),然後可以自己設定一個全寬為多少,意味著將螢幕幾等分,例如將螢幕10等分,那麼1rem = 100vw / 10
,這也就是根元素的font-size
值,此時如果你的設計稿為750
,你就可以得出一個計算設計稿中某個區域寬高的rem值
的公式:width / 750 * 10rem
font-size
值就可以自動根據裝置進行變化。 方案二:
其實就是按照方案一的演算法,把一些螢幕大小範圍設定一個指定的font-size~~~
方案三:
當螢幕小於一個最小值,給根元素font-size設定一個定值,當螢幕大於一個最大值,給根元素font-size設定一個定值;最大和最小之間,等比例增加font-size,每一份所佔font-size為:
(max-fontsize - min-fontsize) / (max-screen - min-screen)
程式碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rem demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">
<style>
.demo{
width:2rem;
height:2rem;
position :absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
padding:0.1rem;
box-shadow:inset 0px 0px 0.2rem 0.01rem #1db11d;
font-size:0.4rem;
color:red;
font-family: "arial";
}
@media screen and (min-width: 240px) and (max-width:1500px){
html{
font-size:calc(100vw/10); /* 將螢幕10等分 */
}
}
@media screen and (min-width: 1500px){
html{
font-size:200px;
}
}
/*
方案二:
@media screen and (min-width: 240px) {html{font-size:32px;}}
@media screen and (min-width: 320px) {html{font-size:42.66px;}}
@media screen and (min-width: 360px) {html{font-size:48px;}}
@media screen and (min-width: 375px) {html{font-size:50px;}}
@media screen and (min-width: 400px) {html{font-size:53.33px;}}
@media screen and (min-width: 414px) {html{font-size:55.2px;}}
@media screen and (min-width: 440px) {html{font-size:58.66px;}}
@media screen and (min-width: 480px) {html{font-size:64px;}}
@media screen and (min-width: 520px) {html{font-size:69.33px;}}
@media screen and (min-width: 560px) {html{font-size:74.66px;}}
@media screen and (min-width: 600px) {html{font-size:80px;}}
@media screen and (min-width: 640px) {html{font-size:85.33px;}}
@media screen and (min-width: 680px) {html{font-size:90.66px;}}
@media screen and (min-width: 720px) {html{font-size:96px;}}
@media screen and (min-width: 760px) {html{font-size:101.33px;}}
@media screen and (min-width: 800px) {html{font-size:106.66px;}}
@media screen and (min-width: 960px) {html{font-size:128px;}}
*/
/*
方案三
html{
font-size:50px
}
@media screen and (min-width: 400px) and (max-width: 960px){
html{font-size:calc( ( 78 / 560 ) * ( 100vw - 400px ) + 50px );}
}
@media screen and (min-width: 960px){
html{font-size:128px;}
}
*/
</style>
</head>
<body>
<div class="demo">
hello,這裡是rem demo!
</div>
</body>
</html>