/* min-width:640px * 针对设备独立像素为640px 的css * min-width:640 和 max-width:999之间 * 边距等按640px来计算 */ @media (min-width: 640px) and (max-width:999px){}
5. 但是在PC端，我们为了适应PC端，所以针对宽度为1000以上也做一个显示处理。
/* 最小宽度1000样式 *为了适应PC端 所以PC端在设计时候 默认以1000px来设计的 */ @media screen and (min-width:1000px) {}
一：使用rem来设置字体
为了方便计算字体，我们来设置浏览器10px，我们都知道浏览器默认的像素是16px，因此我们需要对html{font-size:62.5%;} // 10 / 16 = 62.5%;
首先假如设计搞在移动端上是按照750px设计稿上的话，假如字体在750px下字体大小我们使用rem来写大小；那么他们的字体大小在各个独立像素下如下计算：
针对设备独立像素为640px ~ 999px的css
@media (min-width:640px) and (max-width: 999px) { /* 750/640 = 1.17*/ html{font-size: 53.42%;} /*62.5% / 1.17 */ } @media (min-width: 400px) and (max-width:450px){ /* 750 / 400 = 1.875 */ html{font-size:33.33% } /* 62.5% / 1.875 */ } @media (min-width:360px) and (max-width: 399px) { /* 750 / 360 = 2.08 */ html{font-size:30%} /* 62.5% / 2.08 */ } @media (min-width: 320px) and (max-width:359px){ /* 750/320 = 2.34 */ html{font-size: 26.7%} /* 62.5 / 2.34 */ }
二： 针对宽度，高度，background-size, margin及padding的计算方法；
假如在750px下的宽度是132px；高度是132px；background-size:132px 132px; margin:20px;Padding:20px;
针对设备独立像素为640px ~ 999px的css
@media (min-width:640px) and (max-width: 999px) { /* 750/640 = 1.17*/ html{font-size: 53.42%;} /*62.5% / 1.17 */ // 下面的属性都是 本身的像素 / 1.17 得来的 width: 112.82px; // 132 / 1.17 height:112.82px; // 132 / 1.17 background-size:112.82px 112.82px; // 132 / 1.17 margin:17.09px; // 20 / 1.17 padding:17.09px; // 20 / 1.17 } @media (min-width: 400px) and (max-width:450px){ /* 750 / 400 = 1.875 */ html{font-size:33.33% } /* 62.5% / 1.875 */ // 下面的属性都是 本身的像素 / 1.875 得来的 width: 70.4px; // 132 / 1.875 height: 70.4px; // 132 / 1.875 background-size: 70.4px 70.4px; // 132 / 1.875 margin:10.67px; // 20 / 1.875 padding: 10.67px; // 20 / 1.875 } @media (min-width:360px) and (max-width: 399px) { /* 750 / 360 = 2.08 */ html{font-size:30%} /* 62.5% / 2.08 */ // 下面的属性都是 本身的像素 / 2.08 得来的 width: 63.46px; // 132 / 2.08 height: 63.46px; // 132 / 2.08 background-size: 63.46px 63.46px; // 132 / 2.08 margin:9.62px; // 20 / 2.08 padding: 9.62px; // 20 / 2.08 } @media (min-width: 320px) and (max-width:359px){ /* 750/320 = 2.34 */ html{font-size: 26.7%} /* 62.5 / 2.34 */ width: 56.41px; // 132 / 2.34 height: 56.41px; // 132 / 2.34 background-size: 56.41px 56.41px; // 132 / 2.34 margin:8.55px; // 20 / 2.34 padding: 8.55px; // 20 / 2.34 }
但是有时候在小屏幕下字体太小了，使用户看起来太吃力，我们可以针对小屏幕下适当掉大一点即可；