响应式web设计是一种技术,它可以使网站在不同的设备上都能够得到优化,从而提高用户体验。它的基本原理是根据用户的设备类型(如手机、平板电脑、台式机等)来动态地调整网站的布局和内容,以适应不同尺寸的显示器。
要实现响应式web设计,需要使用一些特定的技术。其中包括HTML5、CSS3、JavaScript、jQuery、Bootstrap 等。HTML5 和 CSS3 是两个重要的前端技术,可以帮助开发者创建出具有流畅布局效果的网站。JavaScript 和 jQuery 可以帮助开发者创建出动态效果,而 Bootstrap 则是一个非常流行的前端 CSS 框架,可以帮助开发者快速创建出具有优雅外观的网站。
// HTML5 代码片段// Content Here// Content Here
媒体(media)查询在 CSS3 上有介绍:CSS3 @media 查询。
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
如果浏览器窗口小于 500px, 背景将变为浅蓝色:
在先前的教程中我们使用行和列来制作网页,它是响应式的,但在小屏幕上并不能友好的展示。
媒体查询可以帮我们解决这个问题。我们可以在设计稿的中间添加断点,不同的断点有不同的效果。
使用媒体查询在 768px 添加断点:
当屏幕 (浏览器窗口) 小于 768px, 每一列的宽度是 100%:
移动端优先意味着在设计桌面和其他设备时优先考虑移动端的设计。
这就意味着我们必须对 CSS 做一些改变。
我们在屏幕小于 768px 进行样式修改,同样在屏幕宽度大于 768px 时也需要修改样式。以下是移动端优先实例:
你可以根据自己的需要添加断点。
我们同样可以为平板设备和移动手机设备设置断点。
在屏幕为 600px 时添加媒体查询,并设置新的样式(屏幕大于 600px 但小于 768px):
注意两组类样式是相同的,但名称不同 (col- 和 col-m-):
以上代码看起来很多余,但是他可以根据屏幕大小自动设置不同的样式,所以还是非常必要的。
针对桌面设备:
第一和第三部分跨越 3 列。中间部分跨域 6 列。
针对平板设备:
第一跨域 3列,第二部分跨越 9 列,第三部分跨域 12 列:
结合 CSS 媒体查询,可以创建适应不同设备的方向(横屏 landscape、竖屏 portrait 等)的布局。
orientation:portrait | landscape
如果是横屏背景将是浅蓝色:
hr 标签表示段落级元素之间的主题划分。例如,在下面的实例中我们对具有主题变化的内容使用了 hr标签:实例当内容的主题发生变化...
label 标签是一种常见的表单控件,触发对应表单控件功能,让用户在使用表单的时候能够有更好的体验。参考下述的实例:实例带有两...
在 HTML 中给定一个具体的范围(包括最大值与最小值),然后使用 meter 标签来显示该给定范围内的数据,请参考下面的实例:实例...
output 标签显示计算或用户操作的结果,该标签是 HTML5 中的新标签。在下面的示例中,我们将返回一个您可以看到的计算结果:实例...
如果在 ruby 元素中需要多某些字符作出解释或者标记其发音,那么请使用 rt 标签来提供相关的信息。rt 元素必须始终包含在 ruby ...
source 标签可以为picture、audio或video元素指定一个或者多个的媒体资源,请参考下述示例:实例带有两个源文件的音频播放器。浏...
title 标签定义HTML文档的标题,通常体现了网页的主题内容,浏览器会以特殊的方式来使用标题,并且通常它显示在浏览器窗口的标题...
wbr 标签可以用来定义HTML文档中需要进行换行的位置,与br标签不同,如果浏览器窗口的宽度足够,则不换行;反之,则在添加了 wbr...
HTML tr 标签当使用 char 属性为网页表格中的行设置了应该相对于哪个字符对齐后,您可以使用 charoff 属性设置对齐偏移量,如下...
HTML embed 标签src 属性定义了 embed 标签中嵌入的多媒体插件的地址来源,使用方法请参考以下示例:实例一个嵌入的 flash 动画...