滨州妈妈网:LG 可能将改变产品线名称,新手机将命名为「Velvet」
LG 日前透漏了新的手机设计语言,一改已往的外型,似乎变得更简约俐落些,除此之外官方也发出新闻稿示意,新的手机将命名为「LG...
扫一扫用手机浏览
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
原文出处:https://www.freecodecamp.org/news/responsive-web-design-how-to-make-a-website-look-good-on-phones-and-tablets/
在快速生长的互联网环境中,种种类型新硬件装备的推出令人目不暇接,若是在这历程里我们的网页能自动适配各装备差别的分辨率且能以对照精彩的样式为用户泛起网页的话,那么将为你的营业提供至关主要的作用。
今天,我们大多数人都或多或少的使用过这个手艺。据统计,停止2019年,谷歌所有搜索接见中有61%是通过移动装备上完成的。另外,据设计,最迟到2020年9月,谷歌将改变其搜索算法,优先思量对移动端支持更友好的网站。
在这篇文章中,我们将为人人先容以下内容,便于人人更容易明白什么是响应式网页设计:
是指网页可以自动凭据用户行为及使用的装备环境(系统平台、屏幕尺寸、屏幕定向等)举行相对应的对结构和行为举行响应的响应和调整。
这些装备特征包罗:
在响应式网页设计盛行之前,许多公司在处置差别用户装备接见网站时,需要凭据差别装备类型将用户重定向到差别的站点上去。最常见的就是 www.*.*, m.*.*。
但是在响应式网页设计中,服务器向所有装备展现的HTML代码都是相同的,仅通过使用CSS用于改变装备上页面的泛起方式。
无论接纳上述哪种方案,为手机或平板电脑确立网站的第一步是先将浏览器的可视局限定下来,这就是viewport meta标签发挥作用的地方。
viewport meta标签为浏览器若何调整页面以顺应每个装备的宽度做出了依据。
在缺少viewport meta标签时,移动浏览器将默认使用桌面端的网页样式,以是若是需要开发具有响应式网页时,需要添加viewport标签,以下是尺度实现:
<meta name="viewport" content="width=device-width,initial-scale=1"/>
若是您不熟悉响应式Web设计,则媒体查询是第一个要学习的最主要的CSS功效。媒体查询使您可以凭据当前装备尺寸来设置元素的样式。现在盛行的CSS计谋是首先编写移动样式,然后在其上构建更庞大的桌面版网页样式。
媒体查询是自顺应Web设计的主要组成部分,通常用于屏幕巨细和偏向差别的网格结构、字体巨细、边距和填充。
下面是移动优先样式的常见用例示例,其中对于较小的装备,列的宽度为100%,但在较大的视口中,列的宽度为50%。
.column { width: 100%; } @media (min-width: 600px) { .column { width: 50%; } }
虽然媒体查询对于响应式网页设计是必不可少的,但许多其他新的CSS功效也在浏览器中获得普遍接纳和支持。在响应性网页设计方面,Flexbox是这些新的主要CSS功效之一。
首先,您可能想知道 “ Flexbox能做什么”?
但我想告诉您的是“ Flexbox不能做什么”。
Flexbox结构(Flexible Box)模块提供了另一种更棒的方式来应对页面种类似结构、对齐和分配容器等需求,纵然它们的巨细是动态的。
在下面的示例中,我们如上所述连系媒体查询来确立一个响应式网格。
<style> main { background: #d9d7d5; display: flex; flex-wrap: wrap; justify-content: space-between; } div { background: #767775; flex-basis: 100%; height: 100px; margin-bottom: 0.5rem; } @media (min-width: 600px) { main { flex-wrap: nowrap; } div { flex-basis: 33%; } } </style> <main> <div></div> <div></div> <div></div> </main>
我们使用上面的代码完成了以下事情:
( 图1)
( 图2)
Flexbox提供了一种很好的方式来实现多样化、流通的结构。在某些情形下,我们在垂直空间可能没有这样的自由。我们可能需要把一个元素放在牢固的高度内。在这种情形下,我们可以使用另一种手艺-水平转动。
可能会有这样一种情形:您的内容会溢出界面,而没有一种优雅的处置方式去解决。没关系,内容溢出转动条可以为你解决这个问题。
此手艺的常见用途包罗可转动菜单和表格。下面是一个可转动菜单的示例。
<style> menu { background: #d9d7d5; padding: 0.25rem; overflow-y: scroll; white-space: nowrap; } span { background: #767775; color: #ffffff; display: inline-block; margin: 0.25rem; padding: 0.5rem; } </style> <menu> <span>Responsive Web Design</span> <span>RWD</span> <span>Responsive menu</span> <span>Overflow scroll example</span> <span>This is a lot of content!</span> <span>Yes</span> <span>we</span> <span>have</span> <span>another</span> <span>item</span> </menu>
通过使用现代图像标签属性,我们可以顺应种种装备和分辨率。以下是响应式图像的示例。
<style> img { max-width: 100%; } </style> <picture> <source type="image/webp" srcset="https://my-image.com/my-image-100.webp 1x, https://my-image.com/my-image-200.webp 2x"> <source type="image/png" srcset="https://my-image.com/my-image-100.png 1x, https://my-image.com/my-image-200.png 2x"> <img alt="my image" src="https://my-image.com/my-image-200.png" loading="lazy" width="100" height="100"> </picture>
max-width: 100%
,图像将凭据其容器宽度自动放大或缩小。srcset
用于凭据装备的分辨率见告浏览器要使用哪个图像。loading="lazy"
。让我们来直接看代码
<style> .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> <div class="videoWrapper"> <!-- Copy & Pasted from YouTube --> <iframe width=560 height=349 src='https://player.youku.com/embed/XNDU0NDIwNDY4OA==' frameborder=0 'allowfullscreen'></iframe> </div>
在此示例中,我们将视频嵌入为iframe和一个div
带有videoWrapper
类的容器。
好的,领会了上面的一些内容后,想必我们已经对响应式Web设计有了一些领会了,那么我们若何测试已经完成的事情呢?
Chrome的DevTools提供了一系列平板电脑和移动装备的移动仿真。它还提供了“响应式”选项,使您可以界说viewport的巨细。
Lighthouse是一个开源工具,它为你提供了一种能剖析特定装备网站性能的方式。
Foo在后台使用LighTower监控网站性能,并提供反馈以供剖析。您可以为桌面和移动装备设置监控,以获得有关您的网站响应情形的连续反馈。例如,Lighthouse报出当前装备未能准确加载的图像。
自顺应网页设计将继续快速生长,随着手艺的生长,我们的用户也将会获得更佳的使用体验。另外,响应式的页面也将会更受搜索引擎的青睐。最后,希望简朴的先容能为您领会这些工具和手艺带来一些辅助!
,
欢迎进入Allbet官网(Allbet Game):www.aLLbetgame.us,欧博官网是欧博集团的官方网站。欧博官网开放Allbet注册、Allbe代理、Allbet电脑客户端、Allbet手机版下载等业务。
发表评论