html 手机端 rem,前端开发移动端自适应（rem）–封装

游戏前端开发 招聘

新浪前端开发招聘

前端开发招聘笔试

@media only screen and (max-width: 1080px),

only screen and (max-device-width: 1080px) {

@media only screen and (max-width: 960px),

only screen and (max-device-width: 960px) {

@media only screen and (max-width: 800px),

only screen and (max-device-width: 800px) {

html,

body {

font-size: 74.074px;

}

}

@media only screen and (max-width: 720px),

only screen and (max-device-width: 720px) {

html,

body {

font-size: 66.666px;

}

}

@media only screen and (max-width: 640px),

only screen and (max-device-width: 640px) {

html,

body {

font-size: 59.259px;

}

}

@media only screen and (max-width: 600px),

only screen and (max-device-width: 600px) {

html,

body {

font-size: 55.555px;

}

}

@media only screen and (max-width: 540px),

only screen and (max-device-width: 540px) {

html,

body {

font-size: 50px;

}

}

@media only screen and (max-width: 480px),

only screen and (max-device-width: 480px) {

html,

body {

font-size: 44.444px;

}

}

@media only screen and (max-width: 414px),

only screen and (max-device-width: 414px) {

html,

body {

font-size: 38.333px;

}

}

@media only screen and (max-width: 400px),

only screen and (max-device-width: 400px) {

html,

body {

font-size: 37.037px;

}

}

@media only screen and (max-width: 375px),

only screen and (max-device-width: 375px) {

html,

body {

font-size: 34.722px;

}

}

@media only screen and (max-width: 360px),

only screen and (max-device-width: 360px) {

html,

body {

font-size: 33.333px;

}

}

@media only screen and (max-width: 320px),

only screen and (max-device-width: 320px) {

html,

body {

font-size: 29.6296px;

}

}

@media only screen and (max-width: 240px),

only screen and (max-device-width: 240px) {

html,

body {

font-size: 22.222px;

}

}

{

margin: 0;

padding: 0;

box-sizing: border-box;

}

ul {

list-style: none;

}

a {

text-decoration: none;

color: inherit;

-webkit-tap-highlight-color: transparent;

}

.clearfix:after {

display: block;

content: “”;

height: 0;

clear: both;

}

img {

width: 100%;

/清除3px间距/

display: block;

}

.header {

width: 100%;

height: 1.4rem;

color: #394b5b;

background-color: #fff;

position: fixed;

margin-bottom: 1.4rem;

z-index: 9;

}

.header .back {

float: left;

color: white;

font-size: .7rem;

padding: 0 .35rem;

line-height: 1.4rem;

}

.header h3 {

float: left;

display: inline-block;

width: 73%;

color: white;

font-size: .45rem;

line-height: 1.4rem;

text-align: center;

}

.header .nav {

float: right;

font-size: .5rem;

padding: 0 .35rem;

line-height: 1.4rem;

}

.header .nav_li {

width: 100%;

margin-top: 1.39rem;

background-color: rgba(0, 0, 0, 0.9);

padding: 0.3rem 0;

}

.header .nav_li a {

font-size: 0.4rem;

width: 70%;

height: 1.5rem;

line-height: 1.5rem;

border-bottom: solid 1px rgba(255, 255, 255, 0.3);

display: block;

color: #FFFFFF;

margin-left: 1.55rem;

}

天津织梦前端开发招聘

太原