开发响应式web页面的示例分析
本篇文章给大家分享的是有关开发响应式web页面的示例分析，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于做网站、成都网站建设、鄞州网络推广、微信平台小程序开发、鄞州网络营销、鄞州企业策划、鄞州品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联为所有大学生创业者提供鄞州建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com
响应式 web 设计开发，使用媒体查询来适应不同的手机屏幕样式开发时，我们需要写不同的样式，为此我们来分享下我个人开发响应式web页面的经验；针对目前手机的独立像素有320，360，384，400，还有iphone6+是414的独立像素，因此我们只需要针对目前这几种匹配即可；如下:
1. 针对手机独立像素是360 ~399等屏幕的宽度
/*
* 但是边距 字体大小等还是安装360px来计算
*/
@media (min-width:360px) and (max-width: 399px) {}
2. 针对手机独立 像素 是320~359之间的
/* min-width:320px
* 针对设备独立像素为320px 的css
* min-width:320 和 max-width:359之间
*/
@media (min-width: 320px) and (max-width:359px){}
3. 针对设备独立像素为400px以上的样式。
/*
* 针对设备独立像素为400px，边距等等都按400px来计算
*/
@media (min-width: 400px) and (max-width:450px){}
4. 针对设备独立像素为640px ~ 999px的css
/* 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) {}
为了方便计算字体，我们来设置浏览器10px，我们都知道浏览器默认的像素是16px，因此我们需要对html{font-size:62.5%;} // 10 / 16 = 62.5%;
首先假如设计搞在移动端上是按照750px设计稿上的话，假如字体在750px下字体大小我们使用rem来写大小；那么他们的字体大小在各个独立像素下如下计算：
6.针对设备独立像素为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 */
}
7.针对宽度，高度，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
}
但是有时候在小屏幕下字体太小了，使用户看起来太吃力，我们可以针对小屏幕下适当掉大一点即可；
以上就是开发响应式web页面的示例分析，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
名称栏目：开发响应式web页面的示例分析
分享地址：http://ybzwz.com/article/jpdojc.html
