响应式布局 原理 使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备。...常用的响应式尺寸划分： 设备 尺寸区间 宽度设置 手机 <768px 100% 平板 [768px, 992px) 750px 桌面显示器 [992px, 1200px) 970px 大桌面显示器(电脑...-- 视口标签的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 --> <meta name="viewport" content="width=device-width...-- 视口标签的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 --> <meta name="viewport" content="width...-- 视口标签的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 --> <meta name="viewport" content="width
用于标识移动网站的Viewport Meta标签 viewport meta标签为浏览器如何调整页面以适应每个设备的宽度做出了依据。...媒体查询使您可以根据当前设备尺寸来设置元素的样式。现在流行的CSS策略是首先编写移动样式，然后在其上构建更复杂的桌面版网页样式。...我们设置main标签设置为flex-wrap: wrap，这个设置为允许其内部子节点在父节点中换行， flex-basis: 100% 是指我们的div节点的宽度是相对于父节点宽度的100％（图1）。...适用于桌面设备的样式，我们利用与上一节中的示例类似的媒体查询将容器main元素设置为flex-wrap: nowrap，这样可以确保子元素不会换行，通过在媒体查询中设置div为flex-basis: 33%...通过picture标签，我们实际上仅渲染一个图像，并且仅基于用户的设备加载最合适的图像。 WebP是一种现代图像格式，可为Web页面上的图像提供出色的压缩方式。
Bulma 是一个手机优先的框架，提供五个宽度断点，具有良好的自适应特性，可以随心所欲为不同设备设置不同样式。...="column">3div> div class="column">4div> div> 如果希望在不同设备，网格占据不同的宽度，可以像下面这样写。...，这个网格在手机上占据二分之一宽度，平板三分之一宽度，桌面四分之一宽度，宽屏和高清则是平铺。...Bulma 允许为不同设备指定不同的布局。...作为一名敲代码为生的程序员，你是不是被旁人贴过太多不属于你的标签----死板、呆萌、宅、不解人意？ （完）
，平板手机已经很常见，所以如何制作适合手机使用的网页？...device-height Length Yes 设置屏幕的输出高度 width Length Yes 渲染界面的宽度 height Length Yes 渲染界面的高度 Orientation Portrait...网页在手机上的比平板上要小，比pc上要小，之前都是针对的是pc设计，现在要考虑到平板，手机，手表，固定的网页无法适应不同的硬件设备。这时候就要对网页进行等比例的缩放，以适应屏幕。...Bootstrap 4 网格系统有以下 5 个类(class): .col- 针对所有设备 col-xs 小设备 .col-sm 平板 - 屏幕宽度等于或大于 576px .col-md 桌面显示器...- 屏幕宽度等于或大于 768px) .col-lg 大桌面显示器 - 屏幕宽度等于或大于 992px) .col-xl 超大桌面显示器 - 屏幕宽度等于或大于 1200px) 2.2.1网格系统规则
Bulma 是一个手机优先的框架，提供五个宽度断点，具有良好的自适应特性，可以随心所欲为不同设备设置不同样式。...Button 上面的代码为 a 元素加上button类，这个链接就会被渲染成按钮。 ? Bulma 提供大量的修饰类，用来改变基类的样式。...="column">3div> div class="column">4div> div> 如果希望在不同设备，网格占据不同的宽度，可以像下面这样写。...，这个网格在手机上占据二分之一宽度，平板三分之一宽度，桌面四分之一宽度，宽屏和高清则是平铺。...Bulma 允许为不同设备指定不同的布局。
简单来讲，viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的...这样就可以做到当我们在浏览桌面端网页的时候，可以让桌面端端网页正常显示（我们普通页面设计的时候，一般页面的主区域是以960px来做的，所以980px这个值，可以做到桌面端网页的正常显示）。..., h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:100%; } transition闪屏 /*设置内嵌的元素在 3D 空间如何呈现：保留3D...touch-icon-iphone-retina.png" /> iOS下针对不同设备定义不同的桌面图标...-- iPad landscape --> 1024.png" media="(device-width: 768px
思路：使用严格受限的高效HTML标签，使用静态网页缓存技术来提高网络访问静态资源的性能和用户体验。 table是一次性渲染的，如果表格内容较长会导致渲染比较慢！...AMP通过自定义标签来替换img、video、audio、embed、form、table、frame、object、iframe这类影响页面渲染的标签，通过JavaScript异步加载完成。...结构层响应式 根据不同的设备浏览器渲染不同的页面结构，而不是直接跳转。可以通过下述两种方式：一是页面内容在前端渲染；二是页面内容在后端渲染。.../main'], function($, main) { main.init(); }); } 后端数据渲染响应式 通过URL或者UA判断设备，尽可能将桌面端和移动端的业务层模块分开维护。...（1）zoom属性控制方案 如果希望在320px宽度屏幕上显示的内容在414px的宽度屏幕上进行等比例自动放大，可以考虑使用元素CSS的zoom属性来解决。
1、响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。...设备的划分情况： 小于768的为超小屏幕（手机） 768~992之间的为小屏设备（平板） 992~1200的中等屏幕（桌面显示器） 大于1200的宽屏设备（大桌面显示器） 1.2...bootstrap里面父容器版心的尺寸划分 超小屏幕（手机，小于 768px）：设置宽度为 100% 小屏幕（平板，大于等于 768px）：设置宽度为 750px 中等屏幕（桌面显示器，大于等于...992px）：宽度设置为 970px 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px 但是我们也可以根据实际情况自己定义划分 2 、bootstrap（前端开发框架...超小屏幕（手机）设备（平板）>=768px 中等屏幕（桌面显示器）>=992px 宽屏设备（大桌面显示器）>=1200px .container 最大宽度 自动（100%） 750px
移动开发-响应式布局 响应式开发原理: 使用媒体查询针对不同宽度的设备进行布局和样式设置，从而适配不同设备 设备划分 尺寸区间 超小屏幕 (手机) < 768px 小屏设备 (平板) >= 768px...~ < 992px 中等屏幕 (桌面显示器) >= 992px ~ <1200px 宽屏设备 (大桌面显示器) >= 1200px 响应式布局容器: 响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果...--要求当前网页使用IE浏览器最高版本的内核来渲染--> 标签的不识别，并导致CSS不起作用的问题--> =768px 中等屏幕 (桌面显示器) >=992px 宽屏设备 (大桌面显示器) >=1200px .container 最大宽度 自动(100%) 750px 970px 1170px
4.x.x:测试阶段，偏向于响应式，移动设备 2、bootstrap 基本模板 渲染引擎进行渲染--> div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">div> div> 解释：上面四个div，如果在超小屏幕上就 100%显示（占12栅格）；在小屏幕上...，每个div占50%显示；在中等屏幕上，每个div占25%显示；在大屏幕上，每个div占33.33%显示。...- : 大屏幕 大桌面显示器 (≥1200px) 注意： 1.栅格系统是往上兼容的：意味着小屏幕上的效果在大屏幕上也是可以正常显示的人，但是大屏幕上的设置在小屏幕上却无法正常显示。
1.1 固定布局 固定布局的网页使用像素作为宽度单位，这意味着无论屏幕宽度如何，网页的宽度都是固定的。这种布局方式在桌面设备上效果良好，但在小屏幕设备上则可能导致内容溢出或无法正常显示。... div> div> .container 类设置了一个固定宽度的容器，无论屏幕的宽度如何，容器的宽度都保持在800px，...通过媒体查询，我们在小屏幕设备上减少了字体大小，以确保文本在不同设备上保持良好的可读性。 七、视口元标签 视口元标签用于控制网页在移动设备上的显示方式。...它允许我们设置视口的宽度和缩放级别，从而确保页面在不同设备上能够正确渲染。 7.1 基本视口设置 设置视口宽度为设备宽度，可以确保页面在移动设备上按照预期显示。 示例：视口元标签 视口元标签设置了 width=device-width 和 initial-scale=1.0，确保页面在移动设备上使用设备宽度，并初始缩放级别为
但在大型显示器上如何呢？在上面的代码中，我们没有指定该div>元素在大型显示器上的表现。进一步的，Bootstrap将自动沿用在超小显示器上指定的布局。...因此，我们代码中的div>元素将在所有设备上跨越12格。...创建动态布局 让我们看看如何将网格系统付诸实践，创建一个动态布局，以适应它所被查看的设备的大小。 假设我们使用Bootstrap创建一个博客的布局；我们给出了它的桌面显示线框图，如图所示 ?...移动设备上的设计 和平板电脑一样，移动设备也可以在风景和人像模式下观看。移动设备中的景观视图利用小型显示器(屏幕宽度768px)，我们已经使用了col-sm类。...移动设备中的竖屏视图使用了额外的小型显示器(屏幕宽度小于768px)。 对于移动设备的线框，我们必须创建一个单列布局。我希望您已经知道如何在上述代码中实现它。
XHTML 也是现在基本上所有网页都在用的标记语言，他其实和 HTML 没什么本质的区别，标签都一样，用法也都一样，就是比 HTML 更严格，比如标签必须都用小写，标签都必须有闭合标签等。...我们有时用移动设备访问桌面版网页就会看到一个横向滚动条，这里可显示区域的宽度就是viewport的宽度。...的宽度等于设备的宽度，同时不允许用户手动缩放。...label 标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。...div contenteditable="true">可以编辑里面的1内容div> 九、web标准及w3c的理解和认识 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链 css
通过在不同的屏幕宽度上定义不同的列宽，您可以轻松创建响应式布局，以适应不同设备的屏幕大小，例如桌面、平板和手机。 栅格系统的核心思想是将页面划分为行（row）和列（col）。...每行可以包含一个或多个列，列的宽度总和不能超过12列。这使得网页布局变得非常灵活，同时确保内容在各种屏幕上以一致的方式呈现。...在这个示例中，我们使用了三个列，每个列占据了4个网格列的宽度，总和为12列。这是一种常见的布局，因为它适用于桌面屏幕，每个列都具有相同的宽度。...md（中等屏幕）：用于普通桌面屏幕。 lg（大屏幕）：用于大型桌面屏幕。 xl（特大屏幕）：用于非常大的屏幕。 通过在列的类名中添加适当的断点前缀，您可以指定在不同屏幕尺寸上列的宽度。...-- 列3（仅在大屏幕上显示） --> div> div> div> 在这个示例中，我们有三列，每列都根据不同的断点设置了不同的宽度。
viewport 在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备...的大小不局限于可视区域，默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站...，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的...也许有人会问，现在不是有很多手机分辨率都非常大吗，比如768x1024，或者1080x1920这样，那这样的手机用来显示为桌面浏览器设计的网站是没问题的吧？ ...所以在1080x1920这样的设备上，在默认情况下，也许你只要把一个div的宽度设为300多px（视devicePixelRatio的值而定），就是满屏的宽度了。
在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，...移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport...在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。...所以在1080x1920这样的设备上，在默认情况下，也许你只要把一个div的宽度设为300多px（视devicePixelRatio的值而定），就是满屏的宽度了。...首先如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的。
二、响应式设计步骤 2.1、viewport 设置 大多数移动端浏览器都将html页面的宽度作为可视区的视图以符合屏幕分辨率，所以我们需要利用 meta 设置 viewport ，将网页宽度设为设备宽度...在head中添加meta标签，设置设备的宽度作为视图大小，禁止缩放。...多种屏幕设备的宽度主要分为四个区间。...超小屏幕手机 (桌面显示器 (≥992px) 大屏幕大桌面显示器 (≥1200px) 媒体查询有两种引入方式：内部引入和外部引入。...四、响应式优缺点 4.1、优点： 面对不同分辨率设备灵活性强。 能够快捷解决多设备显示的适应问题。 4.2、缺点： 响应式网站无法区分移动端，所以会出现隐藏部分无用内容，浪费宽度，加载耗时长。
响应式网页设计 根据设备尺寸，自动调整布局，有bootstrap和foundation等 bootstrap没有自定义标签，主要通过css扩展class foundation不兼容旧版本的ie 网格系统...col-sm- 平板 - 屏幕宽度等于或大于 576px col-md- 桌面显示器 - 屏幕宽度等于或大于 768px) col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px) col-xl...- 超大桌面显示器 - 屏幕宽度等于或大于 1200px) 针对每一行设置，container (固定宽度) 或 container-fluid (全屏宽度) foundation网格系统 small...(手机端) medium (平板设备) large (电脑设备：笔记本，台式机) div class="row"> div class="col">div> div class="col...-6"> test div> div> div> 布局 bootstrap再html的display css属性上封装了三种布局方式，使用控件嵌套方式布局
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
