一、meta 视口标签简介 ---- meta 视口标签 就是为了移动端而设计的 , 该设置只有在移动端生效 ; meta 视口标签 用于设置 浏览器 按照 理想视口 显示页面 ; 使用 meta 视口标签...来指定 视口 的 大小 和 缩放比例， 例如： , 该标签的作用是告诉浏览器...二、meta 视口标签参数详解 - 网页宽度 / 是否允许用户缩放 / 初始缩放比例 / 最小缩放比例 / 最大缩放比例 ---- 在如下的 meta 标签中 : <meta name="viewport...为 viewport ; content 属性中的参数 用于设置 <em>视</em><em>口</em>大小 和 <em>缩放</em>比例 ; width=device-width 样式 设置 网页宽度 = 设备宽度 , 即 理想<em>视</em><em>口</em> ; user-scalable...参数 设置 网页<em>缩放</em>的最小比例 , 该值大于 0 即可 ; maximum-scale 参数 设置 网页<em>缩放</em>的最大比例 , 该值大于 0 即可 ; 如果 不设置 meta <em>视</em><em>口</em>标签 , 在移动端 默认的
那么此时就需要在适应不同宽度的屏幕中进行等比例缩放div区域。...方案一：通过媒体查询，设定在不同屏幕宽度下div的高度和宽度，如下示例 @media only screen and (min-width: 100px) and (max-width: 640px)...{ div{ width: 300px; height: 100px; } }@media only screen and (min-width...: 641px) and (max-width: 789px) { div{ width: 600px; height: 200px; } } 方案二...div{ width:calc(100% - 100px); height:0; padding-bottom:calc((100% - 100px)/3; } 如此得到的div
-- 视口标签的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 --> <meta name="viewport" content="width=device-width...-- <em>视</em><em>口</em>标签的设置：<em>视</em><em>口</em>的宽度和设备一致，默认的<em>缩放</em>比例和PC端一致，用户不能自行<em>缩放</em> --> <meta name="viewport" content="width...-- <em>视</em><em>口</em>标签的设置：<em>视</em><em>口</em>的宽度和设备一致，默认的<em>缩放</em>比例和PC端一致，用户不能自行<em>缩放</em> --> <meta name="viewport" content="width...-- <em>视</em><em>口</em>标签的设置：<em>视</em><em>口</em>的宽度和设备一致，默认的<em>缩放</em>比例和PC端一致，用户不能自行<em>缩放</em> --> <meta name="viewport" content="width...-- <em>视</em><em>口</em>标签的设置：<em>视</em><em>口</em>的宽度和设备一致，默认的<em>缩放</em>比例和PC端一致，用户不能自行<em>缩放</em> --> <meta name="viewport" content="width
视口概述视口简单理解就是可视区域的大小我们称之为视口在 PC 端，视口大小就是浏览器窗口可视区域的大小 图片图片移动端自动将视口宽度设置为 980...带来的问题，虽然移动端自动将视口宽度设置为 980 之后让我们可以很完美的看到整个网页，但是由于移动端的物理尺寸(设备宽度)是远远小于视口宽度的，所以为了能够在较小的范围内看到视口中所有的内容, 那么就必须将内容缩小...>图片图片如何保证在移动端不自动缩放网页的尺寸，通过 meta 设置视口大小：width=device-width：设置视口宽度等于设备的宽度initial-scale=1.0：初始缩放比例, 1 不缩放maximum-scale：允许用户缩放到的最大比例
视口可以分为布局视口、视觉视口和理想视口 2.1 布局视口 （layout viewport） 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。...iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。 ? 将其缩放 ?...2.2 视觉视口 （visual viewport） 它是用户正在看到的网站的区域。注意：是网站的区域。我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。 ?...meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽。...viewport 设置 视口宽度和设备保持一致 视口的默认缩放比例1.0 不允许用户自行缩放 最大允许的缩放比例1.0 最小允许的缩放比例1.0 3.
可以看到，切换了手机显示之后，div变得很小，并且里面的文字都看不清楚了。 那么该怎么办呢？下面来介绍视口的概念。...，移动端会将视口缩放到移动端窗口的大小。...这样会让网页不容易观看，可以用 meta 标签，name=“viewport ” 来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。...使用视口解决上面的div显示太小的问题 ? ? 设置了视口之后，div显示比较正常了。...下面来使用这张图片作为背景缩放一下看看。 ? background-size: length：用长度值指定背景图像大小。不允许负值。 首先写一个div放置这张背景图片。 ?
，直接IP或域名访问 2.视口 视口（viewport）就是浏览器显示页面内容的屏幕区域。...视口可分为布局视口、视觉视口和理想视口 2.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题 iOS，Android...基本都将这个视口分辨率设置为980px，所以pc上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。...可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度 2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定 需手动添写meta视口标签通知浏览器操作...meta视口标签的主要目的：布局视口的宽度应与理想视口宽度一致。
实现方案 实现方案很简单，直接上代码 function changeFontSize() { //设置根元素的font-size为当前视口宽度 document.getElementsByTagName...document.getElementsByTagName('body')[0].style.cssText += ';font-size:16px;'; } changeFontSize(); //视口改变时动态修改根元素的...如果我们始终将跟元素的font-size的大小赋值为视口的宽度，那么所有以rem为单位的尺寸都是视口宽度的百分比。这样我们就可以用rem做为元素高度的单位，他将随着视口的宽度而变化。...使用rem的优点 刚开始是为了解决元素等比缩放的问题，才用上rem的，但是在试用过程中发现rem的响应式布局方案拥有以下一些优点。 1....而rem布局的分母只有一个就是视口宽度。妈妈再也不用担心我弄错分母了。 3.
布局视口不会受到缩放的影响，缩放不会导致页面重排渲染，对于移动端宝贵的性能来说非常重要。...class="box"> 2.2.4 理想视口(ideal viewport) 所谓的理想视口是： 第一，不需要用户缩放和横向滚动条就能正常的查看网站的所有内容...这个值是确定整体网页缩放的比例。 缩放比 = 理想视口的宽度 / 视觉视口的宽度 也就是说当视觉视口的宽度 和 理想视口的宽度相等时，则就是1。...默认的缩放（initial-scale）值设置后，浏览器会根据理想视口计算出视觉视口，并设置布局视口==视觉视口。...该属性的默认值为yes，即可被缩放（如果使用默认值，该属性可以不定义）；当然，如果你的应用不打算让用户拥有缩放权限，可以将该值设置为no。
视口可分为布局视口、视觉视口和理想视口 2.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题 iOS，Android...基本都将这个视口分辨率设置为980px，所以pc上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。...可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度 2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定 需手动添写meta视口标签通知浏览器操作...meta视口标签的主要目的：布局视口的宽度应与理想视口宽度一致。...3.2多倍图 物理像素比会放大图片倍数，会造成图片模糊 在标准viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题 背景图片注意缩放问题 开发中需要用多倍图，比如需要放一个
# 视口的相对单位 相对于浏览器视口定义长度的视口的相对单位。 视口——浏览器窗口里网页可见部分的边框区域。它不包括浏览器的地址栏、工具栏、状态栏。...视口的相对单位 vh: 视口高度的 1/100 vw：视口宽度的 1/100 vmin：视口宽、高中较小的一方的 1/100（IE9 中叫 vm，而不是 vmin） vmax：视口宽、高中较大的一方的.../* 生成了一个大正方形，不管如何缩放浏览器，它都能在视口中显示。...:root { font-size: calc(0.5em + 1vw); } 0.5em 保证了最小字号，1vw 则确保了字体会随着视口缩放。慢慢缩放浏览器，字体会平滑地缩放。...省掉三四个硬编码的断点，网页上的内容也能根据视口流畅地缩放。
视口(viewport) 视口（viewport）浏览器显示页面内容的屏幕区域，视口可以分为布局视口，视觉视口和理想视口 布局视口(layout viewport) 一般移动设备的浏览器默认设置了一个布局视口...，用于解决早期的PC端页面在手机上显示的问题. ios,android基本都将这个视口分辨率设置为980px，所以pc上的网页大多能在手机上呈现，只不过看上去很小，我们只能通过手动缩放网页。...我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度 ** 理想视口 (ideal viewport)** viewport设置 <meta name="viewport...1px不一定等于1物理像素 而在pc页面1px是等于1物理像素的 一个px能显示的物理像素点的个数，称为物理像素比或者屏幕像素比 如下例 定义一个300*300的盒子 在pc显示正常1px=1物理像素 <em>div</em>...、 在标准的viewport设置中，<em>使用</em>倍图来提高图片质量，解决在高清设备图片模糊的问题，通常<em>使用</em>2倍图也就是 我们准备的图片比我们实际需要大小的2倍，在利用css将图片缩小成原来的大小，经过移动端展示后图片会被放大
window.devicePixelRatio);// 1 / 1 = 1;1 / 2 = 0.5;图片如何缩小通过 的 initial-scale 属性来缩小，注意点: 缩放视口后视口大小会发生变化...，利用获取像素比动态设置缩放比例改造之前的示例如下：<!...补充在上方我们是如何进行缩小的是不是通过将整个视口大小进行缩小的，但是在视口缩小之后我们里面的内容并没有随之而然的进行缩小，这个原因其实也很简单，在如下代码我设置了视口的宽度等于设备的宽度，然后在获取了一下视口的宽度...320 没问题：图片然后我在将上面我们进行缩放的代码添加之后再次打印结果如下：<!...，扩大一半之后就变为了 640 960 那么这个时候你就会发现已经与视口的宽度是一个一一对应的关系了，然后在一一对应关系的视口当中先进行布局，布局完毕之后在放入真正视口当中，然后在进行缩小一半，然后正是因为它们是一一对应的关系所以说你看到的界面就没有变小了
为了实现移动视口，我们可以通过监听触摸板的移动事件（也就是 wheel 事件）来改变视口的位置。当用户通过触摸板进行上下或左右滑动时，我们可以相应地移动视口，从而实现图像的平移效果。...我们可以使用 Canvas 的 translate 方法来改变视口的位置。translate 方法接受两个参数，分别表示沿 x 轴和 y 轴移动的距离。...在移动视口时，我们需要更新图片的位置，并重新绘制图像以反映新的视口位置。...宽高的计算比较简单，只需要将视口坐标除以缩放比例即可得到。...: 缩放比例 scaleX: 缩放原点 translateX: 视口移动位置 我们x会在如下视口操作后进行渲染成vx： 1: ctx1.translate(scaleX, scaleY); 2: ctx1
能够从已有html文档中，找到将要修改的位置，并进行简单调整 第1章 案例：重写首页 1.1 案例介绍 将使用Bootstrap重写首页，整个案例中将使用到Bootstrap各种模块，为了方便编程，...-- 视口：用于设置移动浏览器显示效果。...视口的作用：在移动浏览器中，当页面宽度超出设备(device)，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示 取值： width=device-width, 视口的宽度，大多手机浏览器视口的宽度是...： 根据设置确定视口宽度，初始化的缩放比例是2.5，最小缩放比例1.5，最大缩放比例为3，允许在移动设置缩放 常用值： ... .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 ... 例如： <!
rem 认识 优点： 可以适应不同大小的屏幕 使用px或者百分比布局不能实现： px单位时绝对单位 百分比布局是宽度自适应，高度固定的 rem使用 rem使用时需要配合: 媒体查询 flexible.js...(推荐使用⭐) rem 单位 相对单位 相对于HTML标签的字号计算结果 1 rem = 1 HTML字号大小 媒体查询 作用 能够检测视口宽度，根据不同的视口宽度设置不同的html字号大小 HTML...字号取值 不同的视口宽度，设置不同的HTML字体大小，取值为视口宽度的1/10 语法 @media (媒体特性) { 选择器 { css属性； } } 例如： @...max-width 从小到大 min-width 从大到小 /* max-width 从小到大 min-widrh 从大到小 */ /* 视口宽度...class="box"> <script src=".
；要了解这些参数的意义，我们需要先知道几个视口宽度的意义。...width=device-width表示页面宽度layoutviewport与设备视口宽度idealviewport一致 initial-scale=1表示页面宽度和网页宽度与设备视口宽度的初始缩放比例...视口单位 将视口宽度window.innerWidth和视口高度window.innerHeight（即layoutviewport）等分为 100 份。...vw : 1vw 为视口宽度的 1% vh : 1vh 为视口高度的 1% vmin : vw 和 vh 中的较小值 vmax : 选取 vw 和 vh 中的较大值 和rem相比较，视口单位不需要使用js...它的作用是： position:fixed的元素将相对于屏幕视口（viewport）的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。
viewport（视口） ###3个视口### layout viewport（布局视口）:CSS初始包含块的尺寸。CSS中所有以百分比为单位的长度都是根据它推算出来的。...visual viewport（视觉视口,即用户实际看见的部分）：屏幕上显示的网页区域的尺寸，会被缩放影响，可以通过window.innerWidth来获取。...ideal viewport（完美视口）:完美适配移动设备的viewport，它的宽度等于移动设备的屏幕宽度。有了完美视口，用户不用缩放和拖动网页就能够很好的进行网页浏览。...手机浏览器是把页面放在一个虚拟的”视口”（viewport）中，视口可大于或小于手机屏幕的可视区域，一般手机默认viewport大于可视区域。...viewport宽度与设备视觉视口宽度一致了。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
