响应式网页设计:如何让网页完美呈现在不同萤幕 。

响应式网页设计:如何让网页完美呈现在不同萤幕 ,建站公司。

作为一个前端网页设计师,响应式网页不再是特殊需求,而是常态。移动设备(手机、平板电脑等。)超越台式电脑,设计师用响应式设计来设计网站是常有的事。基本上核心归结为一句话,就是自动符合不同设备上的不同内容。为了使网站风格支持响应式设计,最关键的因素是CSS中的媒体查询。媒体查询可以帮助我们在不同内容和大小的设备上定义样式。

[div]

动手操作:使用媒体查询

首先,你得定义响应式网页设计的主要对应尺寸。如上所述,媒体查询可以帮助我们定义不同尺寸设备上的内容显示,因此我们只需将特定设备或尺寸上的特定内容的样式添加到我们现有的样式中,例如:

部门容器{

[div]

宽度:100%;

}

@仅媒体屏幕和(最小宽度:480像素){

div . container {

宽度:40%;

}

}

[div]

在上面的例子中,我们的定义只有当屏幕的最小宽度大于480px时,宽度才会从100%变为40%,而这个480px就是我们通常所说的断点。有关媒体查询的更多属性,请参考Mozilla的文档。但是所谓的480px在同样的情况下会在不同的浏览器显示吗?

[div][div]

断点介绍

断点是什么?在网页设计中,不同设备的布局差别很大。当网页在不同的设备或窗口中缩放时,会根据我们设置的断点参数显示不同的网页布局。在上面的例子中,媒体查询是针对内容的宽度,但是通常父元素的宽度是由它包含的子元素决定的。当然,我们也可以设置一个绝对值。当元素的宽度超过屏幕宽度时,我们的内容将具有水平滚动效果,类似于以下效果:

响应式网页设计:如何让网页完美呈现在不同萤幕 ,建站公司。

同样,在高度上也会出现类似的情况,但一般从网页交互和用户体验的角度来说,我们不会限制具体的高度,因为网页的内容是上下滚动的,高度是可以自由延伸的。

虽然断点是一个很好的响应设计的工具,但是如果用户改变了他的浏览器的默认字体大小呢?CSS中常见的几种字体大小单位对于我们做响应式设计还是很重要的,那么如何具体展现呢?

响应式网页设计:如何让网页完美呈现在不同萤幕 ,建站公司。

[div][div]

正常条件

响应式网页设计:如何让网页完美呈现在不同萤幕 ,建站公司。

我们可以看到在拖动的过程中,三个宽度缩小的div标签的背景颜色同时发生了变化。那是因为系统的字体大小不变而html { font-size:62.5%;},Chrome下480px = 30em = 30rem。

[div][div]

旅行队

我们可以看到显示效果和Chrome下不一样。当宽度小于480px=30em时,红色块和绿色块的颜色透明度降低,而当宽度小于300px=30rem时,蓝色块开始变化。

[div][div]

更改字体大小

在Chrome下,可以设置>:Appearance >: Font size来改变网页字体。我们将字体大小从预设的中变大。此时Chrome的页面内容正常为1rem=20px,而当html { font-size:62.5%;}之后字体大小变成1 rem = 12.5 px .[div]

响应式网页设计:如何让网页完美呈现在不同萤幕 ,建站公司。

我们可以看到字体明显放大了。此时,当宽度小于480px时,红色色块的颜色仍然改变,而当30rem=30em=600px时,绿色和蓝色色块的颜色都改变。

[div]

[div][div]

旅行队

在Safari下,点按“显示”菜单,按住Option键,然后点按以放大或缩小页面字体。此时我们像在Chrome中一样增加1rem=19.2px的字体大小,加载html时{ font-size:62.5%;}之后字体大小变成1rem=12px。

响应式网页设计:如何让网页完美呈现在不同萤幕 ,建站公司。

文字尺寸明显像在Chrome中一样放大,而此时红色色块在宽度小于480px时变色,绿色色块在宽度小于30em=12*1.6*30px=576px时变色,蓝色色块在宽度小于30rem=12*30px时变色。

[div][div]

响应网页断点的规划

即使在同一个设备,不同的浏览器中,不同的单元也会有不同的表现,虽然px在不同的浏览器,甚至不同的设备中表现是一样的。当用户想要改变页面的显示效果(字体大小),或者在不同的设备上观看网页时,他会根据自己喜欢的网页浏览习惯来改变设置。[div][div]

所以综上所述,设计网页的时候应该用px还是rem?我相信设计者应该已经有答案了:我们应该尽量减少px这个非响应单位。因为不同浏览器对rem的定义不一致,所以会很难预测网页的宽度。所以建议选择em为单位。如果我们提前用SASS编辑CSS,可以用sass-mq这样的工具库进行媒体查询,比如:

$ MQ-断点: (

[div]

移动:

20em,

平板:

46.24em,

桌面:61.25em,

宽:

81.25em

);

@ import \ & # 8217mq \ & # 8217;

。foo

@ include MQ($ from:mobile,$until: tablet) {

背景:红色;

}

@ include MQ($ from:table t){

背景:绿色;

}

}

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/86348.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
优化家优化家订阅用户
上一篇 2022年9月10日 02:23
下一篇 2022年9月10日 02:24

相关推荐

  • 用设计的性别吸引你的网站用户。

    如何用设计取悦你的网站用户?也许这时候你的脑海里出现了很多设计方法,但是你有没有想过根据访问者的性别来设计网站呢?男性和女性用户经常基于不同的体验来浏览网站,你的网站的外观可以立即吸引一个或两个性别…

    2022年9月10日
    074
  • 快速提高网站流量秘诀。

    很多站长经常反映网站流量难做。现在做一个日均几万IP的网站已经不像以前那么容易了。但没有什么是绝对的。今天分享五个容易来流量的小技巧。 一、百度知道引流 第一,创建没有竞争力的关键词(最好是唯一的);第二…

    2022年9月10日
    060
  • 定制开发网站上线需要注意的优化问题。

    因为很多企业对网站优化不太了解,在网站定制开发之后就不重视了,但是当网站稳定下来之后发现并没有产生实际效果,然后就想去优化。都说通过后期的努力可以改善网站,但这确实是最不可取的优化方法,不仅浪费时间…

    2022年9月10日
    0160
  • 靠谱的SEO外包让您走的更远。

    关键词优化是当前网络推广的重点项目,各大公司都在积极推广,因为这样可以更好的促进公司的发展,让自己的产品和业务被更多的用户知晓。因此,SEO优化已经成为每个公司的日常工作。因为比较麻烦,而且不知道专业的…

    2022年9月10日
    066
  • 推广感悟:把用户所需要的内容送到用户手中。

    “推广网站”这个词中所包含最有价值的部分就是“推广内容”,把用户所需要的内容告诉用户,这其实才是真正的推广。一个网站的价值本身在于内容,一个有着好的内容的网站才是用户所需要的。 网…

    2022年10月17日
    041
  • SEO。

    如果说搜索引擎推动了中国互联网的发展,那么seo则推动了中国互联网产品的发展和传统行业向互联网的演进。【/br/】我忘了多少年前,家里买了一台286的电脑,但在我的记忆里,那台电脑一直盖着一块布,没有人舍不得…

    2022年9月10日
    058
  • 企业网站建设带来的好处有哪些。

    越来越多的企业通过网站建设实现网络推广。很多用户还不知道网站建设的好处和意义,那么小编就为大家带来企业网站建设的具体作用。感兴趣的朋友不妨看看! 企业网站建设有什么好处? 网站是企业品牌的商标,也是客…

    2022年9月10日
    063
  • 这10个思路 能帮你设计出简单易用的网页。

    编者按:极简主义的流行让越来越多的网页设计师开始着迷简单、简约的网页设计,CARRIE COUSINS 的这篇文章就帮你搞定这个问题~ 坦率的讲,在网页设计这件事情上,简单的设计往往更好。一个简单易用的界面更容易为用…

    2022年7月4日 建站资讯
    0118

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息