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

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

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

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

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

Σ( ° △ °|||)︴这篇文章最后更新于1022天前,您需要注意相关的内容是否还可用。
总字数: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

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

落伍者说 - 落伍者博客是一个关注网络推广、网站建设、站长动态、自媒体发展的自媒体博客。

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

评论(0) 赞助本站

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

发表评论:


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

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

推荐阅读
08月24日

做好内容营销有两大要点

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

用户每天有四个小时的碎片化时间,在各个社交媒体平台上刷刷刷,就是在消费内容。做内容营销是用内容连接用户、筛选用户,先连接后筛选,筛选是把你『定义的用户——精准的用户』筛选出来,因为互联网10亿网民只有一小部分是我们的。做好内容营销有两大要点:1.内容从哪里来?没有内容是巧妇难为无米之炊,内容来源有四个维度:产品维度、公司维度、行业维度、用户维度。不管哪种维度,都要遵循一点:什么样的内容连接/喂养什么用户。如果以上四个维度还是没有内容生产能力,那只能说明一个问题:输入的太少了。解决办法是——输入=...

标签 :
08月24日

网站建设要怎么提升用户体验?

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

网站作为信息互联网化时代公司品牌输出最主要的渠道之一,对任何一家公司来说都有着很主要的意义和效果。尤其是企业自己的网站,对企业帮助非常大,通过网站获取更多的业务,这样的线上运营模式,对于网站的发展非常有帮助,那么想要获取大量的用户,达到很好的宣传效果,网站本身给用户带来的体验度有着决定性的因素。那么网站建设要如何提升用户体验呢?1、页面设计网站的风格也是一个重要因素,风格独特,能够与网站的主题相呼应,本身便能够带给用户耳目一新的感觉,再加上配色和配图的搭配,能够呈现出很好的效果,用户也能够很容易...

标签 :
08月24日

长尾关键字要以用户的角度来思考他的搜索意图来进行布署

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

对于全网推广来说,长尾关键字的分析选择是一项很重要的工作,要以用户的角度来思考他的搜索意图来进行长尾词的布署。1、利用百度相关搜索一般我们搜索某个目标关键字的时候,百度的底部相关搜索会出现一些相关的关键字,这些就是我们要找的长尾,我们可以顺着下面的词,不断点击进去,会收集越来越多的长尾词。2、扩展目标关键字也就是说围绕某个目标关键字进行扩散,增加一些修饰词语等生成的短语,比如本文的关键字是“软文平台”,那么我们可以扩展成“免费软文推广平台”、“软文发布平台”、“发布软文的平台”等等,这个就要自己...

标签 :
08月23日

互联网小白打造个人IP实操指南

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

怎样打造个人IP呢?个人品牌的核心在于“内容”“价值”,而为一大堆无用的title。“个人品牌”,这四个词,相信所在人都并不陌生,每个人都有自己的个人品牌与价值。但是个人品牌的影响力大小,就在于是否运用“内容媒体“”短视频“去放大,2020年开始,智远认为,个人品牌市场将会快速的爆发。1:精准定位先有定位,后有人设。你是面对的实体行业的粉丝,还是互联网的粉丝,是剖析项目,还是揭秘骗局,还是教人实操项目的,这些你都得提前为自己谋划好。领域不怕细分,就怕你整成一锅炖大杂烩,啥都写,啥都不精,来到你公...

标签 :
08月22日

个人站长何去何从,个人站长的出路在哪里?

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

大多数站长已经不再拘泥于SEO小圈子里,有的做电商、有的做营销,也有的创业去了。而至于是否还去站长类门户看文章就有说头了,两家顶尖的站长门户也慢慢变成科技新闻站了。绝大多数站长都是这样的心态:A:看个JB,全TM软文;B:文章越来越水了 不看了C:全是电商软文。D:去,都是讲一样的东西,一篇文章换了几个花样玩E:不去A5和chinaz好多年,但还给自己贴着站长的标签~F:懂网站的人知道网站要成功,内容与资源是最重要的,SEO只是百度等搜索引擎看上你时帮你的工具,前提是你的网站要被他们看上,人家为...

标签 :
08月21日

自媒体的四个发展阶段

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

自媒体,白话说,狭义的是指每个人都可以注册一个账号然后来发布信息,他就是自媒体。自媒体内容形式,也是多种多样,比如文字、图文、声音、视频、甚至直播等。自媒体也经历了四个阶段:第一个阶段它以论坛为代表,比如白杨SEO早期以清平心语在天涯论坛发过贴子,更早的我就没参与了。第二个阶段主要以博客个人网站、微博为主。那时候博客,比如新浪开博客、搜狐、网易博客(网易博客已关),个人网站,SEO人员就是SEO网站,当然也有什么技术、产品等网站。第三个阶段也在当下阶段,主要以公众号、搜狐号、百家号等各类号时代的...

标签 :
08月21日

新手怎么做自媒体

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

简单粗暴,直接开始正文1、选择合适的自媒体平台首先,对于平台的选择建议可以选择主流的自媒体平台,比如公众号、百家号、知乎、头条号、企鹅号等,因为这些平台用户比较多。当你在各个平台新手期度过后,也可以去找一些付费的自媒体一建分发工具来分发你的内容,或者手动来发这些平台。2、选择适合你自己的领域你在进行创作之前,都要选择一个自己适合的领域,这个领域是需要你能够持续创作的。注意,你创作的内容需要和你的领域垂直最好!3、确定选题,收集相关素材当你选择好了自己要写作的领域之后,就可以确定内容的选题和素材收...

标签 :
08月20日

烽火算法升级整改主要打击对象

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

百度搜索近期将对烽火算法再次升级,这波会主要针对移动端部分网站回退按钮点击无效和点击回退按钮跳转违法网站等问题进行大范围调整!以下几种情况是烽火算法升级整改主要打击对象:1、点击网站回退按钮后,无法回退,页面无反应,内容无变化,一直被困在站内,无法跳出。2、点击网站回退按钮后页面直接跳转到网站首页或列表页,而不是按照逻辑跳转到用户浏览的上一级页面。3、点击网站回退按钮后,页面未按照要求跳转到网站上一页,而是跳转到未知色情、赌博,营销广告,红包活动页等未知网页。最后,百度搜索针对上面这些问题表示,...

标签 :
08月20日

双拼域名的价值

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

域名的价值要看多方面的,品种、后缀、品相等。域名的价值是由以上三要素决定,而不是以品种论价,以品种论价都是批量炒货,炒作无价值的域名,以人工杠杆的方式烘托价格,然后让新来的玩家接盘,是一种不正确的域名玩法。另外还需要注意的一点是,域名是否被墙和备案黑名单,只要碰上这两样的其中一样或者都碰上了,域名的价值贬损就非常厉害,毕竟双拼是国人的使用习惯,被墙和备案黑名单就意味着国内市场不受欢迎,甚至无法使用。品种:双拼,相对其他类型,更保值一些。后缀:.com,相对其他后缀,com的大众认知度和影响力都是...

标签 :
08月19日

如何在百家号写好文章?

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

首先,要对百家号做个基本了解:01、百家号的运营机制是什么?百家号使用智能推荐算法向用户推荐文章,系统可以记录每个用户的阅读偏好,并通过智能算法为每个用户设置多个标签。当你的文章和用户可以有相同的标签,你的文章将被推荐给用户。当用户看到你的文章被推送后阅读时,如果他们感觉良好并"称赞"它,系统将根据阅读次数向更多用户推荐它。对于较高的点击量,文章阅读完成率、和转发评论的交互率、表扬、可以增加推荐量。因此,最终的智能推荐算法是一个选择标签和推荐文章的过程。主要目的是使我们的文章...

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