当前位置:首页 » 落伍者说 » 自适应(响应式)网页中的几个关键分辨率

自适应(响应式)网页中的几个关键分辨率

原创 易昂阳 4342°c 2019年04月01日 09:31 落伍者说 0条评论
  移步手机端

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
自适应(响应式)网页中的几个关键分辨率摘要:

现在移动端设备的普及下,除了办公和游戏外使用电脑的次数越来越少,基本上都成为了低头一族。而这苦了一些网页前端的设计人员,为了能让网页适应PC端又同时适配移动端的前提下。自适应响应式网页就成为了当前的主流。自适应网页在不同设备或不同分辨率下,显示的布局是不同的。为了不让页面变形,而...

Σ( ° △ °|||)︴这篇文章最后更新于366天前,您需要注意相关的内容是否还可用。
总字数:2430

现在移动端设备的普及下,除了办公和游戏外使用电脑的次数越来越少,基本上都成为了低头一族。而这苦了一些网页前端的设计人员,为了能让网页适应PC端又同时适配移动端的前提下。自适应响应式网页就成为了当前的主流。

自适应网页在不同设备或不同分辨率下,显示的布局是不同的。为了不让页面变形,而更好来美化网页,我们可以利用@media screen实现网页布局的自适应。

@media screen虽然可以实现网页布局的自适应,但是怎样兼容所有主流设备就成了问题。到底分辨率是多少的时候设置呢?

@media screen使用方法

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

@media print
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
@media(max-width:767px){}

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

@media screen最小宽度

从上面的代码中,可以看出有几个临界点的分辨率,通过他们我们可以写出自己的自适应代码

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

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

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

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

因为如果是1440,由于1440>768那么你的1200就会失效。

我们用min-width时,要注意他们的排列顺序,小的放上面大的在下面(从小到大)

@media screen最大宽度

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

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

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

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

欢迎阅读本文,希望本文对您有所帮助!

本文链接:https://xiji.ren/post/93.html

版权声明:本文为原创文章,版权归 易昂阳 所有,欢迎分享本文,转载请保留出处!

一路向西、吉祥如意,好看的网文,网络奇文尽在西吉人(xiji.ren)博客

欢迎收藏本站,每天更新高质量文章!

评论(0) 赞助本站

赞助西吉人(xiji.ren)博客

发表评论:


【顶】 【踩】 【好】 【懵】 【赞】 【表情】

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

推荐阅读

1999年的11家互联网公司,现今如何?

发布 : | 分类 : 落伍者说 | 评论 : 0人 | 浏览 : 48次
1999年的11家互联网公司,现今如何?

一、1999年的11家互联网公司有哪些?1999年的互联网公司有,阿里巴巴、中华网、当当、携程、盛大、易趣、天涯社区、ChinaRen、8848、红袖添香、亿唐网。二、11家互联网公司现如今如何?1、阿里巴巴阿里巴巴网络技术有限公司(简称:阿里巴巴)是以曾担任英语教师的马云为首的18人于1999年在浙江杭州创立的公司。业务和关联公司的业务包括:淘宝网、天猫、聚划算、全球速卖通、阿里巴巴国际交易市场、1688、阿里妈妈、阿里云、蚂蚁金服、菜鸟网络等。2019年7月,发布2019《财富》世界500强...

标签 :

我国十大直播平台特点分析

发布 : | 分类 : 落伍者说 | 评论 : 0人 | 浏览 : 56次
我国十大直播平台特点分析

今天分享一下全国直播平台的对比。1、抖音:定位是娱乐直播,日活量3-4亿不允许留微信和联系方式。这类型的平台看似简单,但是想做要也没有这么容易,因为需要主播有很强的创意,对内容质量要求比较高,和粉丝互动率较低。经常由于主播之间市场进行撕逼大战,因此整体名声并不是很好。而抖音对流量控制得很严,无法从抖音建立私域流量。2、快手:瞄准下沉市场的直播,去年年底直播日活用户破亿,以生活类的直播内容为主,包涵游戏、体育、教育、媒体、政务、音乐、汽车各个方面。腾讯是快手的股东之一,所以快手可以通过微信号登录,...

标签 :

什么是百度智能小程序单卡?如何获取智能小程序单卡

发布 : | 分类 : 落伍者说 | 评论 : 0人 | 浏览 : 65次

近日,百度搜索资源平台发布智能小程序用户经营知识学习月第四期《如何获得更多用户关注和转化》,帮助开发者分析流量靠前的小程序都有哪些共性?百度搜索资源平台通过对后台的数据分析统计,我们发现,流量更多、用户更愿意点击的小程序确实都有共性,而且这个共性是人人都可拥有,也能自主进行配置的权益——智能小程序单卡。什么是智能小程序单卡智能小程序单卡是一种搜索特型卡片,具有品牌曝光强势、服务交互便捷等优点,能够帮助开发者获取更多用户关注和转化。在品牌曝光上,用户搜索小程序相关名称时,会有 4 大特型样式展现,...

标签 :

内容为王行之有效,视频、游戏都送钱,网赚成黄金增长法则了?

发布 : | 分类 : 落伍者说 | 评论 : 0人 | 浏览 : 64次

线上办公火爆,引众多产品相继入局,字节系不甘示弱上线独立 App “飞书会议;小红书凭借美食攻略的内容重回大众视野,而这也正说明了产品增长法则中内容依旧为王。2 月下架数量降低,产品质量提升明显七麦数据此次针对 2 月的产品上下架情况进行分析,可以发现,今年 2 月的新上架产品数量与 1 月相比出现了小幅下降的变化,而被下架产品的数量却出现了较大的下降趋势。根据比率计算发现,1 月与 2 月上架与下架产品数量的比率分别为 44.48%、50.81%,可以看出,下架产品数量的降低使得 2 月的产品...

标签 :

85万个网站受影响:浏览器将停止支持TLS 1.0/1.1的HTTPS网站

发布 : | 分类 : 落伍者说 | 评论 : 0人 | 浏览 : 70次
85万个网站受影响:浏览器将停止支持TLS 1.0/1.1的HTTPS网站

火狐、Safari、Chrome 和 Edge 等主流浏览器大厂表示,本月底,将陆续停止访问TLS 1.0/1.1的HTTPS网站。意味着,在2020年3月底,几乎所有的主流浏览器都将陆续禁止访问TLS 1.0/1.1的HTTPS网站 访问使用旧版协议的网站将会显示网页错误,这次改动,预计将有85万个站点受影响。另外,虽然不知道国内的浏览器这次会不会也停止支持TLS 1.0/1.1的HTTPS网站,但是建议各位站长网站还是转向更新版本的协议为好,以免后期网站出现相关问题。...

标签 :

腾讯外链封杀史

发布 : | 分类 : 落伍者说 | 评论 : 0人 | 浏览 : 112次

2010年9月27日腾讯封杀360。2011年1月17日腾讯封杀盛大。2013年11月1日腾讯封杀来往。2013年11月腾讯封杀网易易信。2013年12月腾讯屏蔽淘宝链接。2014年11月21日屏蔽快的打车红包2015年2月3日 腾讯屏蔽支付宝红包。2015年10月微信封杀网易云音乐。2016年7月腾讯封杀易到用车。2018年3月5日腾讯封杀今日头条。2018年3月25日腾讯主导沃尔玛封杀支付宝。2018年3月25日腾讯封杀抖音。2019年1月15日 腾讯分别封杀多闪,马桶 MT,聊天宝三款AP...

标签 :

内容营销的必要性以及如何做好内容营销?

发布 : | 分类 : 落伍者说 | 评论 : 0人 | 浏览 : 71次

斗胆直呼,那些教你营销却不带你落地的都是垃圾!本文且从三个纬度说下如何做好内容营销:一、为什么要做内容营销(Why)营销是认准买家,满足需求,获得回报的过程,而内容营销就是:铺好内容让买家找到你,搭好内容让买家信任你,用好内容让买家掏钱给你的过程。说到创业、赚钱,一定避免不了的一个环节就是获客,内容营销只是获客的一种手段,相对其他来说优势非常明显:1)精准且长期存在的流量来源2)便于营造品牌形象,增加顾客信任感3)长期投入值,复利效应明显4)投产比高,不花无用之钱以上是做内容营销的必要性,接下来...

标签 :

百度的变革之年

发布 : | 分类 : 落伍者说 | 评论 : 0人 | 浏览 : 97次

柳传志曾把企业面对不确定性的转型称作“拐大弯”,即找到方向,提前做动作,慢慢拐。与之相对的是“拐死弯”,相当于在90度的路口突然转向,十有八九会出事。拐大弯的核心是提前准备,不能到了路口才转动方向盘。现在来看,爆发于2020年初的新冠疫情让所有企业都要面对一只突如其来的黑天鹅。企业停工停产、营收剧减,要在毫无准备的情况下“拐弯”,难度可想而知。事实上,即使没有这一场疫情,中国经济也在进行一场深刻的转型。2019年中国GDP增速为6.1%,是自1990年以来的最低增速。去杠杆、去泡沫,还原企业的真...

标签 :

百度劲风算法深度解读

发布 : | 分类 : 落伍者说 | 评论 : 0人 | 浏览 : 102次

相信最近百度出的劲风算法,大家多多少少都有所耳闻。对于做SEO优化的从业者来说,必须时刻关注百度对于SEO优化的规范调整,这样一来也更利于提高网站的排名。下面我们一起来深度解读百度的劲风算法,让大家了解劲风算法的概念、目的和应对策略。1、什么是百度劲风算法?百度劲风算法就是专门针对恶劣聚合页问题的。简单来说,搜索一经识别,将会结合站点及智能小程序的用户评价,限制其在搜索结果中的展现。由此,我们可以理解百度劲风算法的存在是打击恶意构造聚合页制造一些垃圾页面获取网页排名的网站,以便于让用户体验更好一...

标签 :

网站分类目录的作用

发布 : | 分类 : 落伍者说 | 评论 : 0人 | 浏览 : 117次

首先,你可以添加一个高质量的反向链接到网站后,你登录的分类目录和它包括在内,这是显而易见的,最直接的。老实说,这也是大多数站长登录分类目录的唯一目的。实际上,这只是其中之一。更多功能请继续阅读。第二,网站登录著名分类目录可以直接接到其他分类目录网站的电话,减少了网站管理员向每个分类目录逐一提交网站的步骤,节省了很多时间,但主要是获得了更多的推广机会。第三,成功列入分类目录后,它不仅对搜索引擎可见,而且对所有用户(浏览器)都可见。优秀的网站目录有很多流量可以享受,所以你可以得到相应的流量目录。特别...

标签 :
您好,欢迎到访网站!
  查看权限