全国咨询电话(李经理)

139-6504-8393

盐城网站建设
盐城网站建设

准备好开始了吗,
那就与我们取得联系吧

  • 选择您需要的服务内容?(多选)*

  • 您的预算
网站建设与前沿观点

前瞻的网页设计理念,助力企业打造高端的互联网品牌形象!

响应式(自适应)网页中的几个关键分辨率
盐城网站建设盐城网站建设 录入时间2022-12-08 阅读次数0

现在移动端设备的普及下,除了办公和游戏外,使用电脑的次数越来越少,基本上都成为了低头一族。而这苦了一些网页前端的设计人员,为了能让网页适应PC端又同时适配移动端,自适应响应式网页就成为了当前的主流。 自适应网页在不同设备或不同分辨率下,显示的布局是不同的。为了不让页面变形,而更好来美化网页,我们可以利用 @media screen 实现网页布局的自适应。 @media screen 虽然可以实现网页布局的自适应,但是怎样兼容所有主流设备就成了问题。到底分辨率是多少的时候设置呢?

@media screen 使用方法

下面的代码是我们从 bootstrap 遍历出来的关于控制自适应的代码

@media print
@media (min- 768px)
@media (min- 992px)
@media (min- 1200px)
@media (max- 767px)

说明:从上页的代码中,我们不难看出 min-width 来确认分别是768、992、1200的分辨率。当然以前也有些老的设备宽度是600、480的,那些小分辨率的我们都归类为小于767的。为什么是小于767而不是768呢,那是因为在css中 @media (min-768px) 表示最小是768也就是>=768,这里有等于,所以我们判断更小的设备用 @media (max- 767px) 表示<=767就不会有冲突了。 @media screen 最小宽度 从上面的代码中,可以看出有几个临界点的分辨率,通过他们我们可以写出自己的自适应代码。

@media (min- 768px) {
 //>=768px的设备
}
@media (min-992px) {
 //>=992px的设备
}
@media (min-1200) {
 //>=1200px的设备
}

注意下它们顺序,如果你把 @media (min- 768px) 写在了下面那么很悲剧,如下面的代码:

注意:此代码为错误的写法

@media (min-1200px) {
 //>=1200px的设备
}
@media (min-992px) {
 //>=992px的设备
}
@media (min-768px) {
 //>=768px的设备
}

因为如果是1440,由于1440>768那么你的1200就会失效。 我们用 min-width 时,要注意他们的排列顺序,小的放上面大的在下面(从小到大)。

@media screen 最大宽度

既然我们可以使用 min-width,也可以使用 max-width 来进行分辨率的划分,max-width的排列顺是大的在上面,小的在下面(从大到小)。

@media (max- 1199px) {
 //<=1199px的设备
}
@media (max- 991px) {
 //<=991px的设备
}
@media (max- 767px) {
 //<=768px的设备
}

通过上面的举例,我们可以灵活的来运用这些代码,来达到网页可以自适应各和设备的目的。

@media and (min- 1200px) {
 //>=1200px的设备
}
@media and (min- 960px) and (max-1199px) {
 //<=1199px and >=960px的设备:PC端
}
@media and (min- 768px) and (max-959px) {
 //<=959px and >=768px的设备:PC端
}
@media and (min- 640px) and (max-767px) {
 //<=767px and >=640px的设备:平板端或者手机横屏
}
@media and (min- 480px) and (max-639px) {
 //<=639px and >=480px的设备:手机横屏
}
@media and (min- 320px) and (max-479px) {
 //<=479px and >=320px的设备:手机竖屏
}
@media and (min- 240px) and (max-319px) {
 //<=479px and >=320px的设备:手机竖屏
}
@media and (max- 239px) {
 //<=239px的设备:手机竖屏
}


【版权声明】:本站内容来自于与互联网(注明原创稿件除外),供访客免费学习需要。如文章或图像侵犯到您的权益,请及时告知,我们第一时间删除处理!谢谢!

关于明图

明图网络成立于2012年,一直专注于互联网建设服务。10+年专业历程,本着“诚信、创新、服务、共赢”的企业精神,服务客户超千家。专注于网站建设、微信小程序开发、设计体验、网站优化排名、品牌营销等服务。

关注微信
  • 微信公众号

    微信公众号

  • 客服微信号

    客服微信号

  • 联系方式
    139-6504-8393

    8:30-22:30 贴心服务(7*14小时)

    业务QQ:68450622

    E-mail:sevice@my0551.com

  • COPYRIGHT © 盐城网站建设 ALL RIGHTS RESERVED 皖ICP备14002487号-5 技术支持:明图网络 XML地图
  • 免责声明:本站部分数据来自网络,如有侵权,请与本站联系,我们第一时间处理。
  • Top
    咨询留言
    请放心填写,我们将严格保密!10分钟内电话反馈!