浅谈移动端开发页面
2015-06-24 21:10 龙恩0707 阅读(3489) 评论(3) 编辑 收藏 举报浅谈移动端开发页面
之前介绍一篇文章是:响应式web实战总结 已经介绍了一些知识点,这里就不多介绍了;我们这边来了解下如何使用媒体查询写不同的css样式;针对响应式web设计开发,使用媒体查询来适应不同的手机屏幕样式开发时,我们需要写不同的样式,为此我们来分享下我个人开发响应式web页面的经验;针对目前手机的独立像素有320,360,384,400,还有iphone6+是414的独立像素,因此我们只需要针对目前这几种匹配即可;如下:
- 针对手机独立像素是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) {}
一:使用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
}
但是有时候在小屏幕下字体太小了,使用户看起来太吃力,我们可以针对小屏幕下适当掉大一点即可;
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
· 使用C#创建一个MCP客户端