background-attachment： 决定 背景图像的位置 是在 视口内固定 ，或者 随着包含它的区块滚动 。 它的属性值的含义如下： 属性值 含义 fixed 背景相对于视口固定。...请注意，translateZ 值可以是负值，表示向内移动，也可以是正值，表示向外移动。 根据你的需求和设计，你可以调整 translateZ 值来实现不同的视差效果。...通过调整 perspective 属性的值，可以改变透视效果的强度。 在视差滚动中，"向内移动"和"向外移动"是相对于观察者（即浏览器窗口）的视角来说的。...核心问题是移动浏览器(Chrome和Safari)有一个“帮助”功能，地址栏有时可见，有时隐藏，改变了视口的可见大小。...这些浏览器没有将 100vh 的高度调整为视口高度变化时屏幕的可见部分，而是将 100vh 设置为隐藏地址栏的浏览器高度。
Step3: 动态设置 html 标签根字体大小 4. Step4: 将设计图中的尺寸换算成 rem 5. Step5: 媒体查询设置body字体大小 6....本文不再对常见概念进行说明，如：设备分辨率、DPR、单位、视口、meta:viewport等，如果对这类概念不甚了解，可以先去搜索引擎查询了解下。 1....step1中已经选择了rem作为单位，在此处只需要固定设置设计稿 html 标签的字体大小，根据计算公式： html字体大小 = 基准n * (clientWidth / 设计稿宽度) 为了方便计算，基准...Step4: 将设计图中的尺寸换算成 rem Step3进行了html根节点文字大小设置，然而意义何在？自然是为了开发者计算的方便。...Step5: 媒体查询设置body字体大小 其实完成了上述Step1～4，已经基本完成了移动端的适配工作，然而，有些情况下，如资讯类文字较多的页面，如果在大屏设备上展示，文字会过大，影响阅读体验，此时需要调整文字大小
本文不再对常见概念进行说明，如：设备分辨率、DPR、单位、视口、meta:viewport等，如果对这类概念不甚了解，可以先去搜索引擎查询了解下。 1....Step2: 消除DPR差异 消除DPR差异只需要将布局视口大小设为设备像素尺寸，可以通过修改viewport参数来实现。...step1中已经选择了rem作为单位，在此处只需要固定设置设计稿 html 标签的字体大小，根据计算公式： html字体大小 = 基准n * (clientWidth / 设计稿宽度) 为了方便计算，基准...Step4: 将设计图中的尺寸换算成 rem Step3进行了html根节点文字大小设置，然而意义何在？自然是为了开发者计算的方便。...Step5: 媒体查询设置body字体大小 其实完成了上述Step1～4，已经基本完成了移动端的适配工作，然而，有些情况下，如资讯类文字较多的页面，如果在大屏设备上展示，文字会过大，影响阅读体验，此时需要调整文字大小
计算机中的相机不会发生散焦等情况，因此在正交投影下调整焦距的效果类似于相机在移动 那么最后如何将正交视体变换为规范视体呢，很显然这也是一个缩放和移动仿射矩阵的情况，只是这一次我们无需忽略Z轴的值了，三轴都要进行移动和变换...相机变换 再回到流程图中，这就到了最后的一个变换部分了，前面的变换都假设物体已经稳稳当当地放在视体中了，但实际上我们需要利用变换让相机坐标移动到需要的位置并让视体对准我们要的物体，再把物体的坐标从世界坐标系转换到相机坐标系中提供给上面的变换...从右到左依次应用：调整相机位置和方向，将物体透视变形到正交视体里，将正交视体转为规范视体，将规范视体中的顶点裁剪投影到屏幕空间中。给每个点乘上这个矩阵后再进行依次透视除法得到物体变换后的真实坐标 ?...由于视体的后面部分由可视距离和上面的θ角度共同决定，因此这里没有画出来。在上图中我们可以想象到，在固定这条式子中的一项的情况下，改变其他项可以调节画面的视野广度。...在大多数观察系统中，例如常见的一些提供了调节选项的三维游戏中，系统都固定了焦距n然后允许我们通过调节θ控制投影面的大小也就是视野大小，因此这个θ的角度就被称为视域(FOV)，代表了焦点到投影面在垂直方向上总共覆盖的视锥角度
如url(flower.png) 4.background-position 设置背景图的起始位置（默认的参照点是左上角） x，y //x的值代表从左到右偏移x，y的值代表从上到下偏移y X%，y% /.../背景图片容器的定位区域大小减去图片大小。...参数 fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。 local 此关键字表示背景相对于元素的内容固定。...scroll 此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）。...详细了解，看demo链接描述 6.background-size 用于设定背景图片的大小。属性是css3的属性，IE9 以下不支持，需要注意其的兼容性。
视口可以分为布局视口、视觉视口和理想视口 2.1 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。...通常使用二倍图， 因为iPhone 6 的影响背景图片 注意缩放问题 3.2背景缩放background-size background-size 属性规定背景图像的尺寸 background-size...: 背景图片宽度 背景图片高度; 单位： 长度|百分比|cover|contain; cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。...移动端单独制作 流式布局（百分比布局） flex 弹性布局（强烈推荐） less+rem+媒体查询布局 混合布局 响应式 媒体查询 bootstarp 流式布局： 流式布局，就是百分比布局，也称非固定像素布局...通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。 流式布局方式是移动web开发使用的比较常见的布局方式。
我们改变浏览器的宽度，然后会看到： 至此，真相大白，“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小...六、视区覆盖以及边界定位 既然vw, vh是视区相关单位，我就想到是不是可以利用这个特性实现精确的视区大小覆盖以及视区边界的定位。...然后各个浏览器测试发现，效果是一模一样的（不支持position: fixed的IE6就当它不存在吧），固定在视区底部，不随滚动条滚动的空白工具栏： 说实话，原本第一眼看到单位vw, vh的时候，觉得这个单位...下图为demo雏形截图，其中，左上角第一个已经成型的垂直布局显然要调整成水平方向型的，具体如何操作，请等我再好好想想，您也可以一同思考！...由于我实在想不出可以使用vmin的场景，因此，未具体介绍。 个人觉的很重要，特别是移动平台，可以实现Orientation后内容自动auto-fit的效果，如iBook阅读PDF。
视口 视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况...，移动端会将视口缩放到移动端窗口的大小。...这样会让网页不容易观看，可以用 meta 标签，name=“viewport ” 来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。... pc端与移动端渲染网页过程： ? 使用视口解决上面的div显示太小的问题 ? ? 设置了视口之后，div显示比较正常了。...background-size: length：用长度值指定背景图像大小。不允许负值。 首先写一个div放置这张背景图片。 ? 下面设置一下背景图片的大小，如下： ?
PC上常用的抠图方法是用钢笔工具或其他选区工具将主体的轮廓完整地勾勒出来，在移动端受限于屏幕大小和输入设备，没办法用手指轻松涂圈出主体的轮廓。...在天天P图的魔法抠图中，则只需要涂一下需要抠出的主体，程序会自动根据色彩信息分辨出主体的轮廓，将其选中。 ? Anticrop在重新构图，延伸图像的使用上非常简单。...三、利用手机传感器，在拍摄时就搞定麻烦的后期 早些时候实现一张全景照片非常费劲。需要三脚架固定机位，以便拍摄的多张照片能保持同一水平。...五、 专业级APP倾向隐藏功能，大众级APP需要全功能曝光 后期APP如Snapseed，Vscocam是众多摄影师的心头好，但对初次接触的用户来说门槛较高。...底部有选择前景图片和背景图片的操作区域，可以随时重新选择前景图片和背景图片，也可以方便地进行前后对调。中间的工具可对前景图片、背景图片分别进行调整，操作的逻辑清晰。 ?
1、问题是什么 1.1、客户端茫茫多，而设计稿只有一个 这是移动端H5页面进行布局时面临的核心问题之一。...2.3、初步优化方案 为了解决纵向适配问题，我们将页面内容分为背景图和内部元素两部分，并针对性的进行属性调整，初步可以解决问题。...2.3.1、背景适配 对于背景元素，一般有两种方案： 拉伸填充 令背景直接在横向、纵向进行平铺；缺点是会令背景图片由于拉伸/收缩而产生形变，比例失衡。...，初步满足了“满屏”的需求，但是仍然存在不足： 不够灵活 固定定位的问题在于元素始终是以自己的某条边相对于视口的对应边框进行定位（如：只能是元素顶部相对于窗口顶部位置固定，而不能实现元素底部相对于窗口顶部位置固定的需求...2.1.3、实际视口中的元素缩放行为 当实际视口短于基准视口，主要元素大小与基准视口保持不变，次要元素按视口比例缩小； 当实际视口长于基准视口，主要元素按视口比例放大，次要元素大小与基准视口保持不变。
移动端： ? 为了后面的介绍，我们首先了解一下【盒模型】 ? background常用属性： background-image：定义背景图像。需要用 url('...') 引入图片。...background-attachment: fixed; 背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。...Lorem ipsum dolor sit amet. content-box 仅在内容区显示背景 Lorem ipsum dolor sit amet. background-size：定义背景图片大小...: 3em; background-size: 12px; background-size: auto; 以背景图片的比例缩放背景图片 / 两个值: 第一个值指定图片的宽度，第二个值指定图片的高度...：设置多重背景 / （若要指定多个图像的背景大小，请提供多个大小，以逗号分隔。）
如图，PC Chrome 中试验，确实如之前解释，放大到 200%后，视口大小缩小了一倍。...为了解决上述固定 viewport 宽度的方案所引发的各种问题，Apple 在 iOS Safari 中首先引入了Viewport Meta Tag ，允许 Web 开发人员定制视口的大小和缩放比例，后续其他的移动浏览器厂商也都支持了此标记...移动端多屏适配的需求，常见主要有两类： 1、布局伸缩式（布局伸缩，内容大小固定或梯级变化）； 2、等比缩放式（布局和内容完全等比例缩放）。...不做大的代码调整的话，等比缩放类的移动端网页，在 PC 上的合理展现方式应该是页面总宽度锁定在某个值，然后水平方向居中。（如下图） ?...在滚动到视图中之前，视口外部的内容在屏幕上不可见。 ●当前可见的视口部分称为可视视口。这可以小于布局视口，例如当用户进行缩放缩放时。该布局视口保持不变，但视觉视口变小。
+ 如 background-size: 100px 100px，将背景图固定到多大尺寸 - percentage + 如 background-size: 90% 90%，以百分比的形式设置背景大小...（2）cover + 1.背景图片等比例缩放 + 2.让背景图相对较小边放大到目标容器大小结束 * 如：一张100\*200的背景图放到一个300\*400的盒子中...，最终背景图片的大小是300\*600 * 因为背景图的较小边为100，将100放大到目标容器300的宽度，放大了3倍，最终结果300\*600 （3） contain +...1.背景图片等比例缩放 + 2.让背景图相对较大边放大到目标容器大小结束 * 如：一张100\*200的背景图放到一个300\*400的盒子中，最终背景图片的大小是200\... + 移动端应该使用更小（体积）的图片 （2）实现方式 + 将元素中直接设置的图片背景删除，换成两个data-属性（如：data-img-sm="小图路径"，data-img-lg=
aspect-ratio 视口的宽高比，如16/9 device-aspect-ratio 屏幕的宽高比 color 每种颜色的位数，如16 color-index 设备颜色索引表中的颜色数...Eric Meyer，Dan Cederholm 怎样阻止移动设备浏览器自动调整页面大小:基于Webkit核心的浏览器大多支持用viewport meta 元素覆盖默认的画布缩放设置，只需要在...将网页从固定布局转换成百分比布局 需要牢记的公式: 目标元素宽度÷上下文元素宽度=百分比元素宽度 将文字大小从像素尺寸修改为相对单位em，实现文字缩放。 ...行高一般相对与元素本身的文字大小，而不是父元素的文字大小。 em作为一种测量单位，指的是特定字母的宽度和高度相对于特定字体磅值的比例。 .../img/3.png') left bottom ，black; 背景图片大小 background-size: 100% 50%， 300px 400px ， auto; 预定义值
通过本章将学习如下图像相关属性，您可以改变图像、媒体的样式等。 width/height 属性: 调整图像宽高大小（前面已介绍，此处不在累述）。...max-width/max-height 属性：调整图像最大宽高大小（前面已介绍，此处不在累述）。...例如，你可能想把一张图像调整到能够完全盖住一个盒子的大小，此时便可以使用 object-fit 属性，它可以帮助你让替换元素以多种方式被调整到合乎盒子的大小。...描述: 此属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。...*/ background-attachment: fixed; /* 背景相对于视口固定，不会随着元素内容滚动 */ background-attachment: local; /* 背景相对于元素的内容固定
响应式设计的三大原则如下： 移动优先。这意味着在实现桌面布局之前先构建移动版的布局。 @media 规则。使用这个样式规则，可以为不同大小的视口定制样式。...# 流式布局 流式布局，有时被称作液体布局（liquid layout），指的是使用的容器随视口宽度而变化。它跟固定布局相反，固定布局的列都是用 px 或者 em 单位定义。...固定容器（比如，设定了 width: 800px 的元素）在小屏上会超出视口范围，导致需要水平滚动条，而流式容器会自动缩小以适应视口。...不仅要让图片适应屏幕，还要考虑移动端用户的带宽限制。图片通常是网页上最大的资源。 首先要保证图片充分压缩。还要避免不必要的高分辨率图片，而是否必要则取决于视口大小。...# 不同视口大小使用不同的图片 响应式图片的最佳实践是为一个图片创建不同分辨率的副本。如果用媒体查询能够知道屏幕的大小，就不必发送过大的图片，不然浏览器为了适配图片也会将其缩小。
边框为部件提供了四周的框架，其border-style属性可以设置为一些内置的框架风格，如inset、outset、solid和ridge。 填充在边框和内容区域之间提供了空白间隔。...如果指定的背景图片具有alpha通道（即有半透明效果），通过background-color指定的颜色将会透过透明区域。这一功能可以使背景图片在多种环境下重复利用。...并且，子部件的位置 还可以使用相对或绝对的方式进一步的调整。具体选择何种调整方式取决于子部件具有固定的大小，还是会随着父部件而变化。...相对定位 相对定位适合于子部件具有固定大小的情形（通过width和height指定子部件大小）。...使用这种方式，子部件可以以相对于subcontrol- position和 subcontrol-origin属性定义的原始位置进行移动调整。
背景图片 相关CSS背景图片background:url(logo.png)no-repeat;背景图片大小缩放: 宽 高background-size:100%100%;绝对定位position:absolute...: fixed;scroll，默认值，背景图片随着窗口滚动fixed，背景图片会固定在某一位置，不随页面滚动背景图像偏移, 如下: 水平(宽度.左右平移) 垂直(高度.上下)background-position...: -50px -50px;背景图片默认是贴着元素的左上角显示通过background-position可以调整背景图片在元素中的位置 可选值：该属性可以使用 top right left bottom...center中的两个值来指定一个背景图片的位置top left 左上bottom right 右下如果只给出一个值，则第二个值默认是center，也可以直接指定两个偏移量 第一个值是水平偏移量如果指定的是一个正值...，则图片会向右移动指定的像素如果指定的是一个负值，则图片会向左移动指定的像素 第二个是垂直偏移量如果指定的是一个正值，则图片会向下移动指定的像素如果指定的是一个负值，则图片会向上移动指定的像素css处理文字不换行
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
