1. 程式人生 > >移動端響應式開發rem字型與頁面百分比設定

移動端響應式開發rem字型與頁面百分比設定

@media screen and (min-width:240px){body{font-size:10px}}
@media screen and (min-width:320px){body{font-size:12px}}
@media screen and (min-width:360px){body{font-size:12px}}
@media screen and (min-width:375px){body{font-size:12px}}
@media screen and (min-width:384px){body{font-size:14px}}
@media screen and (min-width:400
px)
{body{font-size:14px}} @media screen and (min-width:414px){body{font-size:14px}} @media screen and (min-width:424px){body{font-size:14px}} @media screen and (min-width:480px){body{font-size:15.36px}} @media screen and (min-width:540px){body{font-size:17.28px}} @media screen and (min-width:720px){body
{font-size:23.04px}} @media screen and (min-width:750px){body{font-size:24px}} html, body { width:100%; height:100%; color:#646464; font-family: "微軟雅黑"; text-decoration: none; } body {max-width:768px;margin:0 auto;} *{ margin:0; padding:0; } img { border:0;font-size:0;width:100%; }
ul{ list-style-type:none; } a { color:#646464; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color:rgba(255,0,0,0); } .grid-5,.grid-10,.grid-15,.grid-20,.grid-25,.grid-30,.grid-35,.grid-40,.grid-45,.grid-50,.grid-55,.grid-60,.grid-65,.grid-70,.grid-75,.grid-80,.grid-85,.grid-90,.grid-95,.grid-100{ display:block;border: 0;text-align:center;float: left;min-height: 1px;box-sizing: border-box;vertical-align: middle;-webkit-tap-highlight-color:rgba(255,0,0,0); } .grid-5{width:5%;} .grid-10{width:10%;} .grid-15{width:15%;} .grid-20{width:20%;} .grid-25{width:25%;} .grid-30{width:30%;} .grid-35{width:35%;} .grid-40{width:40%;} .grid-45{width:45%;} .grid-50{width:50%;} .grid-55{width:55%;} .grid-60{width:60%;} .grid-65{width:65%;} .grid-70{width:70%;} .grid-75{width:75%;} .grid-80{width:80%;} .grid-85{width:85%;} .grid-90{width:90%;} .grid-95{width:95%;} .grid-100{width:100%;}