1 2列布局 2列布局的使用频率也非常高，其实现效果主要就是将页面分割成左右宽度不等的两列。一般宽度较小的一列会设置为固定宽度，作为侧边栏之类的，而另一列则充满剩余宽度，作为内容区。...实现思路很简单，侧边栏宽度固定，设置绝对定位，使其脱离文档流，内容区域通过calc()函数计算剩余宽度并设置宽度，再加一个margin-left，值为侧边栏的宽度。...flex，侧边栏宽度固定，内容区域设置flex:1即可充满剩余区域。...为内容区域添加最小的高度 这种方法重要用vh(viewpoint height)来计算整体视窗的高度(1vh等于视窗高度的1%),然后减去底部footer的高度，从而求得内容区域的最小高度。...每一个页面都要重新计算一次，这是很麻烦的，所以这种方法虽然简单但却是不推荐的。 使用flex布局 这种方法就是利用flex布局对视窗高度进行分割。
我们可以这样理解 100vw = window.innerwidth, 100vh = window.innerheight 在移动端我们一般都可以认为，100vw就是屏幕宽度。...若使用vw布局，就不需要再像rem那样，在js中去动态设置根元素的font-size了，sass中只需要使用这个函数做转换即可 //以iphone7尺寸@2x 750像素宽的视觉稿为例 @function...百分比%是根据父元素宽度或者高度进行计算，而vw vh固定按照viewport来计算，不会受父元素宽高度影响。...但把body或者html设置为width:100%时，是不包括页面滚动条的宽度的。也就是说100vw在有纵向滚动条的情况下，会比100%宽。...如果你的页面只适用于微信、qq，那绝对能放心使用vw单位，还可以配合vh针对一些特殊比例屏幕做处理，彻底摆脱使用rem带来的副作用，删掉html头部计算font-size的那段js代码，让你的代码更纯粹
HTML5页面布局 常用的页面布局方式有很多种，比如 最早的静态表格布局 通过栅栏划分页面的流式布局 根据屏幕大小自动调整内容的自适应布局 融和流式布局和自适应布局的响应式布局 以上布局主要通过使用css...CALC计算，浏览器高度变化时自动调整。...这样的布局方式存在一些问题，就是当header、footer高度发生变化后，需要重新设置container高度，另外如果container中并列元素较多时，浮动难以控制。...body设置高度 100vh， 这里使用了CSS3 的新单位vh，即 view height 视窗高度，100vh相当于html, body 高度100%，同样还有vw代表视窗宽度 body设置flex...布局，方向从上到下叠放 designerContainer 设置flex 1，自动充满header和footer之外剩余空间 container内部依旧flex布局，designerMain 设置 flex
假设我们有一个元素与以下CSS： .element { width: 50vw; } 当视口宽度为500px时，50vw计算如下 width = 500*50% = 250px 视口高度 vh单位表示根元素高度的百分比...我们有一个元素与以下CSS: .element { height: 50vh; } 当视口高度为290px时，70vh计算如下: height = 290*70% = 202px 大家都说简历没项目写...Vmin 单位 vmin表示视口的宽度和高度中的较小值，也就是vw 和 vh 中的较小值。如果视口宽度大于其高度，则将根据高度计算该值。 我们以下面的例子为例。 ?...在我的职业生涯中，我没有使用固定高度的页脚，因为在例如不同的屏幕尺寸下，此footer是不可行的。...2.第二种解决方案：Flexbox和视口单位（推荐） 通过将100vh设置为body元素的高度，然后可以使用flexbox来使main元素占用剩余空间。
vw 100vw 等于当前窗口屏幕得宽度；vh 100vh 等于当前窗口屏幕得高度；rem 主要根据根元素body得font-size：12px, 1rem 等于12px, 然后跟用窗口得大小赋值给body...真适配又分为 高度适配、宽度适配。 宽度适配就是根据用户得屏幕窗口宽度发生变化做到一个界面适配，比如全部都使用vw。...高度适配是根据用户屏幕窗口发生变化达到一个界面适配，比如使用vh;其实个人认为没必要做高度适配、都根据宽度vw达到一个界面适配就好了，主要是因为做高度适配得话使用vh，再小点得屏幕上 很容易就发生文本重叠...大屏界面布局 其实一般大屏布局会又一个header（主标题、时间展示）、side （副标题：屏幕的两侧可能会分为4块4个维度去展示当前屏的一些信息）、main(大屏主视图)、footer（底部）。...咱们再搭建容器使用的都是定位那么一定要分清定位权重。
perspective() 函数用于定义 计算机屏幕平面 与 应用 translateZ 属性的 HTMLElement 之间的虚拟距离。...视口/视窗 (屏幕可见部分(去除书签栏等, 真正用于渲染页面部分), 非整个浏览器窗口) height：100% 铺满父容器的高度 height：100vh 铺满屏幕(viewport)的高度 "100vh...vh 优势在于能够直接获取高度， 而用 % 在没有设置 body 高度的情况下， 是无法正确获得可视区域的高度的。 100vh 在不同的浏览器的实现方式上也有一点微妙的变化， 这使得它几乎毫无用处。...这些浏览器没有将 100vh 的高度调整为视口高度变化时屏幕的可见部分，而是将 100vh 设置为隐藏地址栏的浏览器高度。...结果是，当地址栏可见时，屏幕的底部部分将被切断，从而破坏了100vh的初衷。 如下所示： 当地址栏可见时，由于移动浏览器不正确地将100vh设置为屏幕高度而没有显示地址栏， 因此屏幕底部被切断。
标签页高度 + 地址栏高度 + 书签栏高度 3、总结上面两点 以上两点的高度计算通过截图获得，可能会有些许误差。...300 ÷ (720 ÷ 100) ≈ 41.666 比如设计稿为 1920x1080（单屏设计高度应该更小一点，如适配第一节所说），可以写个 CSS 预处理函数，这样方便直接使用设计稿的尺寸，以 Sass...写完后在上面列举的主流分辨率下一一测试通过。...8.1、尝试 rem + vh 方案 一开始想的是 rem + vh 结合使用，根元素 html 使用 vh，其他单位则使用 rem，然后找到有问题的宽高比，通过 @media 方式设置 html 为...8.2、落地方案，vh + vw + JavaScript 计算 而直接在元素的属性值上设置为 vh 或 vw，所有的值都会实时变动，没有最小值（除了属性为字体有最小值），这样就最大程度减少 UI 变乱的情况了
换句话说， 不管是1136x750px的屏幕还是960*640px或着其他的尺寸的屏幕，它们的宽度都是100vw，高度都是100vh。...1136x750的屏幕里， 1vw = 11.36px，1vh =7.5px；960*640px的屏幕里， 1vw = 9.6px，1vh = 6.4px。 这跟百分比是一样的。...设置自适应尺寸提供了很大的便利，要为html文档树某处枝叶的一个元素设置相对于屏幕的百分比，在以前， 只能用JavaScript动态计算，现在使用vw和vh两个单位就可以解决问题。...我们可以使用以下公式 宽度(vw) = 100 / 1920 * 100; 高度(vh) = 100 / 1080 * 40; 但是每次都机械样式手动算，太浪费事件了， 于是我制作了一个简单的换算工具...这是工具的界面 首选项里面填好psd设计搞的尺寸， 然后要计算psd中的页面元素的vw和vh的值， 只需要在工具宽高输入框中填入相应的px值， vw和vh值就自动能计算出来了， 减少了无谓手动计算的工作量
如果你想将一个元素设置成全屏高度，你可以设置高度:100vh，这样你就有了一个完美的全屏元素，它会随着视口的改变而改变大小!遗憾的是，事实并非如此。...100vh在不同的浏览器的实现方式上也有一点微妙的变化，这使得它几乎毫无用处。最好避免100vh，而是依赖javascript来设置高度，以获得完整的视口体验。...这些浏览器没有将100vh的高度调整为视口高度变化时屏幕的可见部分，而是将100vh设置为隐藏地址栏的浏览器高度。结果是，当地址栏可见时，屏幕的底部部分将被切断，从而破坏了100vh的初衷。...如下所示： 当地址栏可见时，由于移动浏览器不正确地将100vh设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。在上图中，应该在屏幕底部的按钮被隐藏了。...当页面加载时，将高度设置为window.innerHeight将正确地将高度设置为窗口的可见部分。如果地址栏是可见的，那么window.innerHeight是全屏的高度。
100%的同时设置了padding撑破了外层容器，而fill-available没有，保持我们预想的高度。...不妨了解一下 vh定义法 vh:css3新单位，view height的简写，是指可视窗口的高度,1vh=视窗高度的1%; 既然讲到CSS单位了，麻烦各位再脑补下这个问题： CSS单位都有哪些？...作为一个cv高手，借助搜索引擎我们了解到，Safari把网址栏与工具栏算进了100vh中，是第一个通过选择根据屏幕的最大高度为vh定义固定值来更新其实现的移动浏览器之一，而后Google浏览器也效仿它。...滚动时可见区域会动态变化，如果我们相应地更新CSS视口高度，则需要在滚动过程中更新布局。为了达到更好的用户体验，使用较大的视图尺寸是最好的折衷方案。..., `${vh}px`); 这样就成功在:root中创建了--vh的css变量 为了防止旋转屏幕功能的使用，我们需要监听窗口调整大小事件来更新我们创建的--vh值 window.addEventListener
如果要设置一个元素的样式使它占据整个屏幕的高度，那么你可以设置height: 100vh，这样你就拥有一个完美的全屏元素，该元素会随着视口的变化而调整大小！可惜的是，事实并非如此。...100vh在移动浏览器中以一种微妙但基本的方式被破坏，使其几乎无用。最好避免使用100vh，而应该通过javascript设置高度的方式来获得完整的视口体验。...当视口高度变化时，这些浏览器没有将100vh的高度调整为屏幕的可见部分的高度，而是将100vh设置为隐藏了地址栏的浏览器的高度（其实就是100vh高度没变，但是地址栏那块把内容顶出去了一块）。...无论地址栏是否可见，屏幕都将是视口的高度。此外，在页面首次加载时将高度固定为适当的大小，可以防止在使用该网站的过程中地址栏隐藏，从而带来尴尬的屏幕调整大小体验。...遗憾的是，在不依赖JavaScript的情况下，仍然没有一种简单的方法来使元素占据整个视口高度。100vh是如此接近伟大（greatness），但考虑到它在移动设备上的局限性，最好避免使用它。
如果要设置元素的样式以占据整个屏幕的高度，则可以设置height: 100vh，您拥有一个完美的全屏元素，该元素会随着视口的变化而调整大小！可悲的是，事实并非如此。...这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分，而是将100vh设置为浏览器的高度，并隐藏了地址栏。结果是，当地址栏可见时，屏幕的底部将被切除。...如下所示： 当显示地址栏时，由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。在上图中，应隐藏在屏幕底部的按钮。...无论地址栏是否可见，屏幕都将是视口的高度。此外，通过在页面首次加载时将高度锁定在适当的位置，可以防止地址栏隐藏在使用该网站的过程中，从而带来尴尬的屏幕调整大小体验。...遗憾的是，在不依赖JavaScript的情况下，仍然没有一种简单的方法来使元素占据整个视口高度。 height: 100vh 非常接近 ，但鉴于其在移动设备上的局限性，最好避免使用它。
当进行布局的时候，有时候需要div元素根据屏幕的宽度和高度进行自适应，而不是根据内容 除了使用js方法之外，还可以使用css3的新单位 vh wh 1vh=视窗高度的1%，height: 100vh...;就是屏幕高度的100% 1vw=视窗宽度的1%，width: 100vw;就是屏幕宽度的100% vw、vh 与 % 百分比的区别 （1）% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的...（2）vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的。...margin: 0; } .content{ width: 100vw; height: 100vh...; background: #1c7430; } 1vh=视窗高度的1%，height: 100vh;就是屏幕高度的100%
CSS中的视口单位听起来很棒。如果要设置元素的样式以占据整个屏幕的高度，则可以设置height: 100vh，您拥有一个完美的全屏元素，该元素会随着视口的变化而调整大小！可悲的是，事实并非如此。...这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分，而是将100vh设置为浏览器的高度，并隐藏了地址栏。结果是，当地址栏可见时，屏幕的底部将被切除。 如下所示： ?...当显示地址栏时，由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。在上图中，应隐藏在屏幕底部的按钮。...无论地址栏是否可见，屏幕都将是视口的高度。此外，通过在页面首次加载时将高度锁定在适当的位置，可以防止地址栏隐藏在使用该网站的过程中，从而带来尴尬的屏幕调整大小体验。...遗憾的是，在不依赖JavaScript的情况下，仍然没有一种简单的方法来使元素占据整个视口高度。 height: 100vh 非常接近 ，但鉴于其在移动设备上的局限性，最好避免使用它。
先知道一下viewport的四个单位，vw、vh、vmax、vmin： vw:1vw 等于视口宽度的1% vh:1vh 等于视口高度的1% vmin: 选取 vw 和 vh 中最小的那个 vmax:选取...取的是vw和vh最大最小计算。 先使用rem，之前用的是淘宝的flexible.js，会帮你动态的根据屏幕大小计算html的font-size。...我去看了之前的项目和淘宝，根据750的设计稿，使用flexible.js的在屏幕556px之后html的font-size最大是54px，移动端的时候540之后html的font-size最大也是54px...既然知道rem的原理，只需要动态设置html的font-size，计算也很简单，比如按照750设计稿，flexible的1rem是75px，如果配合vw，100vw是750px，那么1px就是0.1333333vw...也可以直接用蓝湖直接转换，或者设置成1rem为100px，那font-size就要设置成13.33333vw。 有点跑偏了，主要想分享postcss-px-to-viewport的使用。
处理高度的时候，vh单位更好。 1. 占满宽度的元素: % > vw 正如我所提到的，vw单位根据视窗的宽度决定它的大小。然而，浏览器是根据浏览器的窗口计算视窗大小的，包括了滚动条的空间。...在这个例子中，我用红色边框包裹html元素，然后给section元素设置背景颜色。 ? 因为这个细微的差别，当使一个元素横跨整个页面的宽度时，最好使用百分比单位而不是视口的宽度。 2....占满高度的元素:vh > % 在另一方面，当使一个元素跨越整个页面的高度时，vh远比百分比单位好。...因为用百分比定义的元素的大小是由它的父元素决定的，只有父元素也填满整个屏幕的高度时我们才能拥有一个填满整个屏幕的高度的元素。...滚动条的问题也不是一个问题，因为现在大多数页面通常不会有水平滚动条。 vh应用 全屏背景图片 vh单位一个典型的用途是用来创建一个横跨整个屏幕高度和宽度的背景图片，不管设备的大小。
前端css单位小结：vh、vw、百分比、rem、px、计算属性calc 1 vh 视口的高度，也就是眼睛可以看到屏幕的高度，如果你的屏幕分辩率为1920*1080，那么视口的高度就是1080px，vh可用于写自适应...一般给css div 的 height赋值用。 2 vw 与vh相对的，视口的宽度，同理，如果你的屏幕分辩率为1920*1080，那么视口的宽度就是1080px，vw可用于写自适应。...4 rem 根据根元素来变化大小，如果在根元素设置10px，那么1rem=10px。亦可用于自适应布局。...有时候在自适应的布局下，边框线通常用px来设定，比如1px啥的。 6 计算属性calc height: calc(~'100% - 7.4rem - 10px'); 这就是计算属性咯。...可以计算出当前的值，然后再赋值。
px px 是 pixels（像素）的缩写，是一种绝对单位，用于屏幕显示器上，传统上一个像素对应于计算机屏幕上的一个点，而对于高清屏则对应更多。...如果父元素没有设置字体大小，则继续往父级元素查找，直到有设置大小的，如果都没有设置大小，则使用浏览器默认的字体大小。...来计算的，所以如果改变 html 的 font-size 值，那么所有使用的 rem 单位的大小都会随着改变，这对于移动端适应各种屏幕大小来说还是有点作用的。...vw：基于视窗的宽度计算，1vw 等于视窗宽度的百分之一 vh：基于视窗的高度计算，1vh 等于视窗高度的百分之一 vmin：基于vw和vh中的最小值来计算，1vmin 等于最小值的百分之一 vmax：...基于vw和vh中的最大值来计算，1vmax 等于最大值的百分之一 下面我们实例说明实现一个宽度为视窗宽度的 25%，高度为视窗高度 50% 的一个盒子： .box { height: 50vh; /
原来的样子： image.png 软键盘弹出来后： ? 在开发APP时，通常情况下页面的宽度和高度都会设为 100%，即页面高度等于屏幕高度，页面宽度等于屏幕宽度。...一种可行的解决方案：给页面设置一个最小高度，即一个能让所有元素按原来布局排列的高度。....app { min-height: 768px; /* 原来定义的高度 100% */ height: 100vh; } ?...软键盘还是会弹起，因为页面最小高度被设为了 768px，所以此时总高度为 768px + 软键盘高度，超出了屏幕高度（ipad横屏屏幕高度为768px）。...; } } 这样设置即可适配 iphone5 和 iphone6
所以使用时，我们只要让根字体大小随屏幕大小自适应，那页面中所有使用rem单位来设置宽高的元素，大小也会随屏幕大小自适应了。...代码的关键参数20和375是这样设置的： a) 由于提供的设计稿现在基本都是以iPhone6/7/8为参考的，宽度为750px，dpr为2，所以计算rem时的参考屏幕宽度可以设置为375。...b) 由于chrome的最小字体是12px，又为了计算方便，所以可以设置1rem的大小为20px 应用过程中，比如我们拿到了一个750的设计稿，那么首先，将设计稿里的数值除以2，得到按手机屏幕大小布局的数值...（也就是常说的2倍图、3倍图的使用）等 四、vw、vh vw是以屏幕宽度为基准的百分比单位，1vw=1%* deviceWidth vh是以屏幕高度为基准的百分比单位，1v=1% * deviceHeight...vw,vh确实很好用，但是目前使用时仍需考虑兼容性的问题，在国内一些手机自带浏览器里（比如华为）会失效，并且据说碰上X5内核时也容易踩坑 。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
