怎样才能合适的使用,可适应页面中vh和vw和百分比有什么区别_珍藏百科
怎样才能合适的使用,可适应页面中vh和vw和百分比有什么区别
编辑: &&&来源:用户发布&&&发布时间:&&&查看次数:38
有人知道怎样才能合适的使用,可适应页面中vh和vw和百分比有什么区别,谢啦。
该问题暂无回答。
其它百科相关
本文相关文章
- 关于我们 - 版权声明-
广告服务 - 友情链接 - 管理登录 -
Copyright &
All Rights Reserved
如有任何侵权、造谣信息请将网页地址和有法律效力的侵权造谣证明或判决书发往QQ:小时内删除。
苏ICP备号-1&Mully_穆栗的喜欢 | LOFTER（乐乎） - 让兴趣，更有趣
LOFTER for ipad —— 让兴趣，更有趣
Mully_穆栗 的喜欢
&nbsp&nbsp被喜欢
&nbsp&nbsp被喜欢
{list posts as post}
{if post.type==1 || post.type == 5}
{if !!post.title}${post.title|escape}{/if}
{if !!post.digest}${post.digest}{/if}
{if post.type==2}
{if post.type == 3}
{if !!post.image}
{if post.type == 4}
{if !!post.image}
{if !!photo.labels && photo.labels.length>0}
{var wrapwidth = photo.ow < 500?photo.ow:500}
{list photo.labels as labs}
{var lbtxtwidth = Math.floor(wrapwidth*(labs.ort==1?labs.x:(100-labs.x))/100)-62}
{if lbtxtwidth>12}
{if !!labs.icon}
{list photos as photo}
{if photo_index==0}{break}{/if}
品牌${make||'-'}
型号${model||'-'}
焦距${focalLength||'-'}
光圈${apertureValue||'-'}
快门速度${exposureTime||'-'}
ISO${isoSpeedRatings||'-'}
曝光补偿${exposureBiasValue||'-'}
镜头${lens||'-'}
{if data.msgRank == 1}{/if}
{if data.askSetting == 1}{/if}
{if defined('posts')&&posts.length>0}
{list posts as post}
{if post_index < 3}
{if post.type == 1 || post.type == 5}
{if !!post.title}${post.title|escape}{/if}
{if !!post.digest}${post.digest}{/if}
{if post.type == 2}
{if post.type == 3}
{if post.type == 4}
{if post.type == 6}
{if drlist.length>0}
更多相似达人：
{list drlist as dr}{if drlist.length === 3 && dr_index === 0}、{/if}{if drlist.length === 3 && dr_index === 1}、{/if}{if drlist.length === 2 && dr_index === 0}、{/if}{/list}
暂无相似达人，
{if defined('posts')&&posts.length>0}
{list posts as post}
{if post.type == 2}
{if post.type == 3}
{if post.type == 4}
{if post.type == 6}
this.p={ dwrMethod:'queryLikePosts',fpost:'',userId:,blogListLength:1};前端在线资源
本文全文转载需购买版权(500?)，摘要引流则免费，具体
一、什么是视区相对单位？
就是相对于浏览器viewport尺寸的单位，具体包括下面4个：
vw &#8211; 视区宽度百分值
vh &#8211; 视区高度百分值
vmin &#8211; vw或vh，取小的那个
vmax &#8211; vw或vh，取大的那个
至于更具体的内容，我就不展开了，因为我发现已经有一个很厉害的人对这些单位作为很详细的介绍了，是超详细，这个人超能写。而且一看发表日期，2012年9月，我勒个擦，这不是上届伦敦奥运会的时候嘛，足足有4年了呀，也太前沿了吧，那个时候的浏览器兼容性还只是这幅鸟样子：
好东西呢是要分享滴，这篇文章就是：“”，速速围观，就算不学知识，也看感受下这篇文章的气场。
大家有没有发现，……………………，这个很厉害的人原来就是我本人……
4年时光，物是人非，vw头上的草叶越来越绿了，现在的兼容性则是：
确实绿了很多，Android 4.4开始支持，前段时间给老爹买的华为机子默认都是5.*版本，看上去，vw在移动端的春天要来哈~
CSS3中还有另外一个单位rem，估计有不少小伙伴耳闻或者用过，为何rem要比vw火呢，因为rem从Android 2.1版本就开始支持了，兼容性好。一旦兼容性不是问题，vw也会火起来的，就跟薛之谦一样。
二、基于vw的响应式排版和布局
一般而言，屏幕越大，我们希望文字大小也越大，元素的尺寸也能等比例放大，尤其在现在的网页设计风格中。
如果要实现这种弹性自适应效果，目前主流的实现是通过设定根元素的font-size大小，具体元素或模块使用rem或em单位来实现。
一种是直接设定一个临界点字体大小，如：
font-size: 16
@media screen and (min-width: 600px) {
font-size: 18
@media screen and (min-width: 1000px) {
font-size: 22
还有一种就是使用JS在resize或者屏幕旋转的时候，动态修改root的font-size大小。
前面一种基于@media的CSS实现问题在于，内容的弹性自适应只会在临界点的时候，“Duang”变化下，于是，我们浏览器尺寸拉伸的时候，会感受到类似“噔噔噔”卡壳的效果，感觉就像是吃了含笑半步癫：
使用JS的问题在于他是JS，要保证加载体验，需要头部内联，为了保证实时性，需要多个浏览器变化事件监测，用我的口头禅讲就是“显得啰嗦”。
那有没有两全其美的方法呢？
有，那就是本文要隆重请出场的vw，配合CSS3 calc计算实现动态字体大小效果。
例如，我们希望浏览器宽度在600px~1000px变化的时候，html根元素的font-size大小是18px~22px之间对应变化的，则可以：
html { font-size: calc(18px + 4 * (100vw - 600px) / 400); }
当视区宽度是600px的时候，100vw就等于600px，于是：
18px + 4 * (100vw - 600px) / 400
18px + 4 * (600px - 600px) / 400
当视区宽度是1000px的时候，100vw就等于1000px，于是：
18px + 4 * (100vw - 600px) / 400
18px + 4 * (1000px - 600px) / 400
18px + 4px
于是，理论上，一个18px~22px字体大小动态匹配的布局基础就建好了。
一般出现“理论上”这三个字，就说明我要“放坑”了，大家闪开~~
此“坑”就是苹果系统的Safari浏览器不认识上面的属性值（如下截图）：
就Safari不行，window下的所有浏览器，包括IE，以及mac下的Chrome等浏览器都是可以正确解析的。
我这篇文章的前一篇文章“”就是吐槽“Safari是新时代的IE6”来着，没想到一日不见，这“新时代IE6”的名声是坐的越来越夯实了哈！
好在，我们还是有办法曲线救国的。那就是，我们基础字体大小不使用像素单位，使用百分比单位即可，如下：
html { font-size: calc(112.5% + 4 * (100vw - 600px) / 400); }
这个包括Safari在内的浏览器，都能够按照我们的预期计算font-size大小了，于是，我们一番倒腾，就有了如下的响应式设置：
/* iPhone6的375px尺寸作为16px基准，600px正好18px大小 */
font-size: calc(100% + 2 * (100vw - 375px) / 225);
@media screen and (min-width: 600px) {
/* 600px-1000px每100像素宽字体增加1px(18px-22px) */
font-size: calc(112.5% + 4 * (100vw - 600px) / 400);
@media screen and (min-width: 1000px) {
/* 1000px往后是每100像素0.5px增加 */
font-size: calc(137.5% + 5 * (100vw - 1000px) / 1000);
有个动态的根字体大小，我们就可以使用rem或em这些相对单位，来让我们的页面排版和布局更富有弹性。
您可以狠狠地点击这里：
结果在大尺寸下：
小尺寸下：
对比会发现，文字的大小和图片的大小都明显不一样了，但是，最终给人的排版的感觉却没有什么不舒服的，因为，你仔细看，就会发现，虽然字号差别很大，但是文字的换行位置居然都是一模一样的，这活脱脱等比例缩放的即视感。你说，这么洒脱的效果，什么手机各种分辨率适配还是问题吗？是问题吗？
对吧，直接变成了毛毛雨，几行CSS，全部搞定！如果你足够懒，甚至可以本文的CSS代码直接copy到自己项目中用，注释都不需要改，也是可以的！
这么低的成本，这么好的体验，还不赶快在自己的项目里试试？
经过大型项目实践，下面这段CSS是最好的基于rem和vm和calc实践代码：
font-size: 16
@media screen and (min-width: 375px) {
/* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
font-size: calc(100% + 2 * (100vw - 375px) / 39);
font-size: calc(16px + 2 * (100vw - 375px) / 39);
@media screen and (min-width: 414px) {
/* 414px-1000px每100像素宽字体增加1px(18px-22px) */
font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
font-size: calc(18px + 4 * (100vw - 414px) / 586);
@media screen and (min-width: 600px) {
/* 600px-1000px每100像素宽字体增加1px(20px-24px) */
font-size: calc(125% + 4 * (100vw - 600px) / 400);
font-size: calc(20px + 4 * (100vw - 600px) / 400);
@media screen and (min-width: 1000px) {
/* 1000px往后是每100像素0.5px增加 */
font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
然后，就可以愉快地使用rem单位用来排版和布局啦！
三、结束语
对于大厂，Android4.4之前的版本，目前怕是还是要兼顾的，怎么办？我觉得没有必要为了一个老妪而放弃整个后宫，对于绝大部分设备，我们还是vm + calc哗啦啦地走起，老的设备，我们可以使用以前JS的策略，打个脚本补丁，估计十来行代码，效果都是一样的，CSS代码也完全复用，一点都没必要特异处理，因为老机子不认识vw，所以完全没必要担心新老冲突这样的问题。
当然，我自己目前也没在正式的to C项目中实践过，所以，或许还有其他坑什么的，Android设备那么多，谁知道哪个机子的浏览器突然就抽风了呢！
但是，这并不妨碍我大胆预测：再过1~2年，基于vm布局的各种文章、各种事件案例就会雨后春笋般出现……
好了，好像没有什么其他要说的了。
感谢阅读，欢迎交流！
本文为原创文章，尊重辛勤劳动，可以免费摘要、推荐或聚合，但完整转载需付费购买版权，详见
本文地址：
（本篇完）
相关文章 (0.242) (0.242) (0.242) (0.194) (0.097) (0.097) (0.097) (0.097) (0.097) (0.097) (RANDOM - 0.081)
标签： , , , , , , ,
赞助商推荐()：
想学到点真东西？
如果你有1~3年前端开发经验，不妨
想找个师兄入门前端？不妨
热门总排行css所有单位都在这了：px,em,rem,vh,vw……
css所有单位都在这了：px,em,rem,vh,vw……
科技信息之剑
小伙伴们，css3单位你们听说过多少？我们在前端切图项目中用到的有px，em，rem，vh，% 其他基本没用到过了。特别是vh ，特别好用。附所有css单位，应该是最全的了px：绝对单位，页面按精确像素展示em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。vmin：vw和vh中较小的那个。vmax：vw和vh中较大的那个。%:百分比in:寸cm:厘米mm:毫米pt:point，大约1/72寸pc:pica，大约6pt，1/6寸ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀)ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)切版qieban(.cn)
本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。
科技信息之剑
百家号 最近更新：
简介: 了解最新信息技术，正确选择家用电器。
作者最新文章&px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%，
这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
& rem是CSS3新增的一个相对单位（root em，根em）
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。
对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
& vh、vw：相对于视口的高度和宽度，而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)。
1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。
& vmin、vmax：关于视口高度和宽度两者的最小值或者最大值。
比如，浏览器的宽度设置为1200px，高度设置为800px， 1vmax = px = 12px， 1vmin = 800/100px = 8px。如果宽度设置为600px,高度设置为1080px, 1vmin就等于6px, 1vmax则未10.8px。
阅读(...) 评论()