，各种类型新硬件设备的推出令人目不暇接，如果在这过程里我们的网页能自动适配各设备不同的分辨率且能以比较出色的样式为用户呈现网页的话，那么将为你的业务提供至关重要的作用。...这些设备特性包括： 网络连接方式 屏幕尺寸 交互类型（触摸屏，触摸板） 图形分辨率。 在响应式网页设计流行之前，许多公司在处理不同用户设备访问网站时，需要根据不同设备类型将用户重定向到不同的站点上去。...媒体查询是自适应Web设计的重要组成部分，通常用于屏幕大小和方向不同的网格布局、字体大小、边距和填充。...Flexbox布局（Flexible Box）模块提供了另一种更棒的方式来应对页面种类似布局、对齐和分配容器等需求，即使它们的大小是动态的。...它还提供了“响应式”选项，使您可以定义viewport的大小。 ? 使用Foo监控移动网站的性能 Lighthouse是一个开源工具，它为你提供了一种能分析特定设备网站性能的方法。
x轴，就从左到右排列） flex-end 从尾部开始排列 center 在主轴居中对齐 space-around 平分剩余空间 space-between 先两边贴边，再平分剩余空间（重要） 3.flex-wrap...(Media Query) 可以针对不同的屏幕尺寸设置不同的样式 @media mediatype and/not/only (media feature) { CSS-Code;} 复制代码 @media...screen and (max-width: 800px) { body {background-color: blue;} } 复制代码 媒体查询最好的办法是从小到大 引入资源 针对不同的屏幕尺寸，...{ content: " "; } } 复制代码 三.rem实际开发适配方案 1.元素大小取值方法 页面元素的rem值= 页面元素值(px)/（屏幕宽度/划分的分数） 屏幕宽度/划分的分数 就是html...在不同屏幕下，通过媒体查询来改变布局容器的大小，再改变子元素的布局方式和大小。
页面初始渲染，这是开销最大的一次重排 添加/删除可见的DOM元素 改变元素位置 改变元素尺寸，比如边距、填充、边框、宽度和高度等 改变元素内容，比如文字数量，图片大小等 改变元素字体大小 改变浏览器窗口尺寸...尽量减少使用 iframe ， 搜索引擎不会抓取 iframe 中的内容 图片加上 alt 提高网站性能也是一方面。 ❞ 13....实现水平居中 4.1 text-align: center ❝外层盒子 设置 对齐方式 为 居中 内层盒子 display 为 inline-block , ❞ <div class...❝ 不同浏览器的默认的 margin 和 padding 不同。...元素的包含块为 viewport 视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。 元素的位置在屏幕滚动时不会改变。
--文本对齐--> 文本左对齐 文本居中 文本右对齐 内容块居中 ... 清除浮动 width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度
响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容； 响应式布局的 5 种实现方案 百分比布局 媒体查询布局 rem 响应式布局 vw 响应式布局 flex 弹性布局...二、媒体查询布局 通过@media 媒体查询，可以通过给不同屏幕的大小编写不同的样式来实现响应式的布局。 响应式缺点：如果浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。...，如何将设计稿对应的 px 单位转换为 rem 单位 在实际的开发中，我们通常会以 750px 的移动端设计稿来开发。...来动态修改不同屏幕尺寸下的 font-size 大小就可以实现等比例放大和缩小了 js 动态修改 html 根元素的 font-size 的大小，能适配不同尺寸的屏幕，不再局限于这 5 种 <script...100vw = 视图窗宽度 ，100vh = 100 视图窗高度 如果移动端有 5 个不同的视口宽尺寸 750 ，640，480，375，320，则在不同尺寸下，对应的 1vw 的 px 值如下表 移动端尺寸
把iframe解释成“浏览器中的浏览器“是很恰当的。也应该是框架的一种形式，它与不同的是，iframe可以嵌在网页中的任意部分。...HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为 Auto：则自动出现滚动条；如为Yes，则显示; FrameBorder：区域边框的宽度，为了让“内部框架“与邻近的内容相融合...示例： 9、对齐方式： 语法：align=left、right、center 说明：该属性指定浮动帧与其他对象的对齐方式...left：居左； right：居右； center：居中。...hspace：浮动帧内的左右边界大小； vspace：浮动帧内的上下边界大小。
把iframe解释成“浏览器中的浏览器“是很恰当的。也应该是框架的一种形式，它与不同的是，iframe可以嵌在网页中的任意部分。...，滚动选项，如果设置为NO，则不出现滚动条；如为 Auto：则自动出现滚动条；如为Yes，则显示; FrameBorder：区域边框的宽度，为了让“内部框架“与邻近的内容相融合，常设置为0。 ...示例： 9、对齐方式： 语法：align=left、right、center 说明：该属性指定浮动帧与其他对象的对齐方式...left：居左； right：居右； center：居中。 ...hspace：浮动帧内的左右边界大小； vspace：浮动帧内的上下边界大小。
框架:方便在页面中引用站外的页面内容。 23....和锚链接的结合：使锚链接的内容在iframe框架中打开 <a href="链接路径" target...`删除线 (2)vertical-align垂直对齐：只能作用于表格单元格的对象: top顶、middle居中、bottom底 (4)text-shadow文本阴影： 语法”text-shadow...如margin:0px auto;让整个盒子居中。 如果将元素的margin设为负值，则元素会变大。 (块元素可以把左右页边距设置为”自动”中心对齐。...作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。 (2)标题： 描述表格内容，标题的显示位置：表格上方。
前言 富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。 方式 iframe 页面中嵌入一个包含空HTML页面的iframe。...格式段落 居中 document.execCommand('justifyCenter'); 左对齐 document.execCommand('justifyLeft'); 右对齐 document.execCommand...toString()：返回选区所包含的文本内容 * IE8-浏览器不支持，我试了IE8以上也不支持 selection对象 术语 anchor：选中区域的“起点”。...modify(alter, direction, granularity)： 改变焦点的位置，或扩展|缩小selection的大小。...collapseToEnd()：将“起点”移动到，selction的“结束点”，多个range时也是如此。
「原子步骤」 绘画块的有序列表，即显示项目组和属性树状态，作为渲染管道「图层化」Layerize步骤的输入数据 合成器帧是RenderingNG表示如何将栅格化的内容「拼接在一起」，并使用GPU有效地绘制它的数据格式...元素的一部分」 ❞ 通常情况下，每个元素只有一个片段，但如果在渲染管道中绘制Paint阶段被分割Split到不同的页面，则会有更多的片段。...(0,0)位置，尺寸为75x200，且颜色为橘色的图块 drawTextBlob命令在(0,0)位置，绘制I'm falling文本信息 如果用户滚动#「scroll」，第二个合成层会被移动，但不需要栅格化...例如，当滚动一个网站时，现有瓦片的位置会向上移动，只是需要为更远的页面内容栅格化一个新瓦片。 上面的图片有四张「瓦片」。当滚动发生时，「第五块」瓦片开始出现。...这也是一个优化不必要的中间纹理或屏幕外内容的机会。例如，在很多情况下，一个独立网站的iframe的合成器帧不需要它自己的中间纹理，可以通过绘制quad直接绘制到框架缓冲区。
border：指定图像的边框宽度，以像素为单位。 align：指定图像在文本中的对齐方式，常见的值包括 left（左对齐）、right（右对齐）和 center（居中对齐）。...响应式图片 在移动设备和不同屏幕尺寸的计算机上显示图像时，通常希望图像能够根据屏幕大小进行自适应。为了实现这一点，可以使用CSS和HTML结合的方法，或者使用HTML5的srcset属性。...srcset属性允许您指定多个不同大小的图像，浏览器会根据屏幕大小自动选择合适的图像。...浏览器会根据屏幕宽度选择其中之一。 sizes 属性：定义不同屏幕宽度下图像的显示大小。...在这个示例中，如果屏幕宽度小于等于320px，则图像宽度为280px；如果屏幕宽度小于等于480px，则图像宽度为440px；否则，图像宽度为800px。
在标准的网页中非常少用。把iframe解释成“浏览器中的浏览器“是非常恰当的。也应该是框架的一种形式。它与不同的是。iframe能够嵌在网页中的随意部分。...如为Yes，则显示; FrameBorder：区域边框的宽度，为了让“内部框架“与邻近的内容相融合。常设置为0。 name:框架的名字，用来进行识别。...该属性指定浮动帧与其它对象的对齐方式。...right：居右； center：居中。...hspace：浮动帧内的左右边界大小； vspace：浮动帧内的上下边界大小。
语法：text-align:left(左对齐)|center(居中对齐)|right(右对齐)|justify(两端对齐); 注：a）当需要让容器中的文本或图片等其他元素水平居中时，给父容器添加text-align...body和html高度为0的情况 八、水平居中 1.如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center;来实现的。...一、移动端相关概念 1.屏幕尺寸 屏幕尺寸是指屏幕对角线的长度，单位为英寸，1英寸=2.54厘米 2.屏幕分辨率 屏幕分辨率是指横纵方向上的像素点数，单位为px，1个像素点=1px (这里的1px是指物理设备上的一个像素点...适用于内容较少比较简单的移动端页面 2.等比例缩放布局(rem布局) 特点：使用rem为主要单位进行页面布局，很好的实现了在不同设备上页面等比例缩放 案例：网易 注：适用于页面内容较多较复杂的移动端页面...3.混合布局 特点：混合布局是指将多种布局方式(如flex布局，圣杯布局，百分比布局等)融合在一起实现移动端的屏幕适配的方法 案例：淘宝网 三、移动端相关单位 1.px 像素，相对于屏幕分辨率而言 2
它允许我们沿着交叉轴改变特定子元素的对齐方式： >> align-self具有与align-items完全相同的值。实际上，它们改变的是完全相同的内容。...对于烤肠而言，「每个项目都可以沿着它的棍子移动，而不会干扰其他项目」： 相比之下，通过我们的主轴串联每个兄弟元素，一个单独的项目如果要移动位置，那势必会影响周围兄弟元素的。...无论我们如何增加flex-shrink,内容将溢出而不是继续缩小！ ❞ 文本输入框的默认最小大小为 170px-200px（在不同的浏览器之间有所变化）。 在其他情况下，限制因素可能是元素的内容。...align-items将在包围每一行的无形框内上下移动每个项目。 ❞ 但如果我们想对齐行本身怎么办？...因此，我们不能单独移动行，我们需要将它们作为一个组进行分配。 使用我们上面的定义，我们正在处理内容，而不是项目。但我们仍然在谈论交叉轴！因此，我们想要的属性是align-content。
":随着文字栏位的不同 而改变这个视图的宽度或者高度。...将对象纵向居中，不改变其大小. 垂直对齐方式：垂直方向上居中对齐。...将对象横向居中，不改变其大小....附加选项，用于按照容器的边来剪切对象的顶部和/或底部的内容. 剪切基于其纵向对齐设置：顶部对齐时，剪切底部；底部对齐时剪切顶部；除此之外剪切顶部和底部....附加选项，用于按照容器的边来剪切对象的左侧和/或右侧的内容. 剪切基于其横向对齐设置：左侧对齐时，剪切右侧；右侧对齐时剪切左侧；除此之外剪切左侧和右侧.
当我们为图像应用不同的宽度和/或高度时，我们实际上是在改变内容框的尺寸。如果内容框的尺寸发生变化，图像仍然会填充内容框。...但正如我们所看到的，为了让 object-fit 发挥作用，我们首先需要在图像的内容框上定义一个与其自然大小不同的高度和宽度。...与background-position默认为0 0（从容器的左上角定位背景图像）不同，object-position 的默认值是50% 50%，将图像居中于其内容框。...none 值保持图像的正常大小，因此在容器中看不到图像的顶部、底部和两侧。 再次注意，默认情况下，图像的中心与内容框的中心对齐。...object-position 为 50% 50% 意味着图像的中心与其内容框的中心在水平和垂直轴上对齐。
padding: 10px; } 文本居中对齐 如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center; .center { text-align: center...注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。...其他一些属性可用于不同的媒体类型。例如，”font-size”属性可用于屏幕和印刷媒体，但有不同的值。...屏幕和纸上的文件不同，通常需要一个更大的字体，sans - serif字体比较适合在屏幕上阅读，而serif字体更容易在纸上阅读。...@media 规则 @media 规则允许在相同样式表为不同媒体设置不同的样式。 在下面的例子告诉我们浏览器屏幕上显示一个14像素的Verdana字体样式。
如果出现 void setImageContentView(int resld) ： 设置ImageView的内容为指定的资源。...（表示错误） 2.ImageView类的setScaleType(ImageView.ScaleType scaleType)方法是控制图像如何调整大小或者移动，以适应ImageView的大小。...CENTER_CROP: 按统一比例扩大图片的大小居中显示，使得图片的长和宽等于或大于ImageView的长（宽）。 CENTER: 将图片按原来大小居中显示，不进行缩放。...如果出现： MATRIX: 把图片扩大或者缩小到 ImageView 的大小（改变图片的原始比例） ， 则表示错误。...后续 可能存在出现错误的地方，欢迎指正，如果对于文章中的某些部分有不同的理解和想法，或者有更好的想法，欢迎留言讨论。
, 这是因为该页面设置了最小宽度 ; 一般设置最小宽度 320 像素 , 智能手机中的屏幕如果是 320 像素 , 这就是最小的手机屏幕了 ; 4、查看网页最大最小宽度 进入京东页面 , 按 F12...100%; /* 最小宽度 320 像素 */ min-width: 320px; /* 最大宽度 640 像素 */ max-width: 640px; /* 居中对齐...*/ margin: 0 auto; /* 字体大小 14 像素 */ font-size: 14px; /* 如果是苹果就是用苹果默认字体 如果不是苹果手机...100%; /* 最小宽度 320 像素 */ min-width: 320px; /* 最大宽度 640 像素 */ max-width: 640px; /* 居中对齐...*/ margin: 0 auto; /* 字体大小 14 像素 */ font-size: 14px; /* 如果是苹果就是用苹果默认字体 如果不是苹果手机
下面我们以内置的 GettingStarted.cpt 模板为例，来看看分页预览的使用方式以及其一些属性的设置。 2....属性 内容 注意事项 以下设置 采用服务器设置：默认情况，使用服务器统一的设置，下面的所有选项都为灰色无法编辑。 为该模板单独设置：只适用于当前的模板，下面所有的功能可编辑、设置。...- 报表显示位置 设置内容在报表当中显示的位置。 默认为左展示，如果希望报表显示的内容是居中的，可以选择居中展示。 1）移动端不生效 2）分页预览居中展示时，默认无边框线。...2）iframe嵌入时自动收缩 如果当前的页面是被以 iframe 的方式嵌入到其他的网页当中的时候，会自动的调整页面的大小，以适合 iframe 的大小。...用户可自定义工具栏显示的工具。 移动端不支持工具栏设置 事件设置 用户可添加 Web 事件。 Web 事件的详细介绍请参见 Web 页面事件。 移动端仅支持加载起始和加载结束事件。
领取专属 10元无门槛券
手把手带您无忧上云
