浅谈移动端开发页面
之前介绍一篇文章是：响应式web实战总结 已经介绍了一些知识点，这里就不多介绍了；我们这边来了解下如何使用媒体查询写不同的css样式；针对响应式web设计开发，使用媒体查询来适应不同的手机屏幕样式开发时，我们需要写不同的样式，为此我们来分享下我个人开发响应式web页面的经验；针对目前手机的独立像素有320，360，384，400，还有iphone6+是414的独立像素，因此我们只需要针对目前这几种匹配即可；如下:
- 针对手机独立像素是360 ~399等屏幕的宽度
/*
* 但是边距 字体大小等还是安装360px来计算
*/
@media (min-360px) and (max- 399px) {}
2. 针对手机独立像素是320~359之间的
/* min-320px
* 针对设备独立像素为320px 的css
* min-320 和 max-359之间
*/
@media (min- 320px) and (max-359px){}
3. 针对设备独立像素为400px以上的样式。
/*
* 针对设备独立像素为400px，边距等等都按400px来计算
*/
@media (min- 400px) and (max-450px){}
4. 针对设备独立像素为640px ~ 999px的css
/* min-640px
* 针对设备独立像素为640px 的css
* min-640 和 max-999之间
* 边距等按640px来计算
*/
@media (min- 640px) and (max-999px){}
5. 但是在PC端，我们为了适应PC端，所以针对宽度为1000以上也做一个显示处理。
/* 最小宽度1000样式
*为了适应PC端 所以PC端在设计时候 默认以1000px来设计的
*/
@media screen and (min-1000px) {}
一：使用rem来设置字体
为了方便计算字体，我们来设置浏览器10px，我们都知道浏览器默认的像素是16px，因此我们需要对html{font-size:62.5%;} // 10 / 16 = 62.5%;
首先假如设计搞在移动端上是按照750px设计稿上的话，假如字体在750px下字体大小我们使用rem来写大小；那么他们的字体大小在各个独立像素下如下计算：
- 针对设备独立像素为640px ~ 999px的css
@media (min-640px) and (max- 999px) {
/* 750/640 = 1.17*/
html{font-size: 53.42%;} /*62.5% / 1.17 */
}
@media (min- 400px) and (max-450px){
/* 750 / 400 = 1.875 */
html{font-size:33.33% } /* 62.5% / 1.875 */
}
@media (min-360px) and (max- 399px) {
/* 750 / 360 = 2.08 */
html{font-size:30%} /* 62.5% / 2.08 */
}
@media (min- 320px) and (max-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-640px) and (max- 999px) {
/* 750/640 = 1.17*/
html{font-size: 53.42%;} /*62.5% / 1.17 */
// 下面的属性都是 本身的像素 / 1.17 得来的
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- 400px) and (max-450px){
/* 750 / 400 = 1.875 */
html{font-size:33.33% } /* 62.5% / 1.875 */
// 下面的属性都是 本身的像素 / 1.875 得来的
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-360px) and (max- 399px) {
/* 750 / 360 = 2.08 */
html{font-size:30%} /* 62.5% / 2.08 */
// 下面的属性都是 本身的像素 / 2.08 得来的
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- 320px) and (max-359px){
/* 750/320 = 2.34 */
html{font-size: 26.7%} /* 62.5 / 2.34 */
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
}
但是有时候在小屏幕下字体太小了，使用户看起来太吃力，我们可以针对小屏幕下适当掉大一点即可；