精华内容
下载资源
问答
  • 原本css是3.5vw 安卓h5不兼容系统设置超大字体会撑开DIV 添加如下代码 新写法 3.5rem <script type="text/javascript"> // 100像素1rem (function (doc, win) { var docEl = doc.documentElement, ...

     原本css是3.5vw

    安卓h5不兼容 系统设置超大字体 会撑开DIV

    添加如下代码

    新写法 3.5rem

    系统超大字体 1vw = 1rem 

    <script type="text/javascript">
    	(function (doc, win) {
    		var fontSize_d = 16;//默认字体大小
    		var fontSize =0;
    		try {
    			fontSize = parseInt(document.defaultView.getComputedStyle(document.documentElement,null)['fontSize']);
    		} catch (error) {}
    		
    		if(!(fontSize>0))fontSize = fontSize_d;//字体大小读取失败
    		var cz =  fontSize_d/fontSize;
    
    		var docEl = document.documentElement,
    			resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    			recalc = function () {
    				var clientWidth = (parseInt((docEl.clientWidth /100)*cz*100) / 100 )+ 'px';
    				docEl.style.fontSize = clientWidth;//100 * (clientWidth / 750) + 'px';
    				// document.body.style.fontSize = clientWidth;
    				console.log(clientWidth,fontSize,cz);
    			};
    			
    		recalc();
    		window.addEventListener(resizeEvt, recalc, false);
    	})(document, window)
    </script>

     

    展开全文
  • 其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们...

    一、 calc()的使用

    什么是calc()?

    calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。

    calc()能做什么?

    calc()能让你给元素的做计算,你可以给一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度,比如说“width:calc(50% + 2em)”,这样一来你就不用考虑元素DIV的宽度值到底是多少,而把这个烦人的任务交由浏览器去计算。

    calc()语法

    calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:

    .elm {

    width: calc(expression);

    }

    其中"expression"是一个表达式,用来计算长度的表达式。

    calc()的运算规则

    calc()使用通用的数学运算规则,但是也提供更智能的功能:

    使用“+”、“-”、“*” 和 “/”四则运算;

    可以使用百分比、px、em、rem等单位;

    可以混合使用各种单位进行计算;

    表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;

    表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。

    浏览器的兼容性

    浏览器对calc()的兼容性还算不错,在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持,同样需要在其前面加上各浏览器厂商的识别符,不过可惜的是,移动端的浏览器对早期版本的兼容性不是太好。

    43274cef13002352372c38f4fe3a0cee.png

    大家在实际使用时,同样需要添加浏览器的前缀

    .elm {

    /*Firefox*/

    -moz-calc(expression);

    /*chrome safari*/

    -webkit-calc(expression);

    /*Standard */

    calc();

    }

    二、vw 、vh、vmin 、vmax 的使用

    1、vw 、vh、vmin、vmax的含义

    1,vw、vh、vmin、vmax 的含义

    1,vw、vh、vmin、vmax 的含义

    (1)vw、vh、vmin、vmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。

    视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。

    (2)具体描述如下:

    vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)

    vh:视窗高度的百分比

    vmin:当前 vw 和 vh 中较小的一个值

    vmax:当前 vw 和 vh 中较大的一个值

    2、vw、vh与%百分比的区别

    (1)% 是相对于父元素的大小设定的比率,vw、vh 是视窗大小决定的。

    (2)vw、vh 优势在于能够直接获取高度,而用 % 在没有设置 body 高度的情况下,是无法正确获得可视区域的高度的,所以这是挺不错的优势。

    3、vmin、vmax用处

    做移动页面开发时,如果使用 vw、wh 设置字体大小(比如 5vw),在竖屏和横屏状态下显示的字体大小是不一样的。

    由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

    4、浏览器兼容性

    (1)桌面 PC

    Chrome:自 26 版起就完美支持(2013年2月)

    Firefox:自 19 版起就完美支持(2013年1月)

    Safari:自 6.1 版起就完美支持(2013年10月)

    Opera:自 15 版起就完美支持(2013年7月)

    IE:自 IE10 起(包括 Edge)到现在还只是部分支持(不支持 vmax,同时 vm 代替 vmin)

    (2)移动设备

    Android:自 4.4 版起就完美支持(2013年12月)

    iOS:自 iOS8 版起就完美支持(2014年9月)

    参考:https://blog.csdn.net/romantic_love/article/details/80868909

    展开全文
  • vw,vh是css3中给我们提供的新的单位,他们是相对于viewport视窗的宽高进行计算的单位。说白了,就是相对于浏览器的窗口的大小。 vw单位 vw是相对于视窗宽度的单位, 1vw=1/100浏览器宽度。 vh单位 vh是相对于视窗...

    vw vh的介绍

    vw,vh是css3中给我们提供的新的单位,他们是相对于viewport视窗的宽高进行计算的单位。说白了,就是相对于浏览器的窗口的大小。

    vw单位
    vw是相对于视窗宽度的单位,
    1vw=1/100浏览器宽度。

    vh单位
    vh是相对于视窗高度的单位,
    1vh=1/100浏览器高度。

    vw vh的用途
    vw vh相对于浏览器的窗口的大小,代码如下:

    .div{
        width:50vw;
        height:50vh;
    }
    

    vw vh一般情况下他可以用我们常用的50%等百分比来替代,但是vw vh有百分比实现不了的长处。

    比如我们实现一个在浏览器正中央的正方向div
    代码如下:

    .vw_vh{
        position:absolute;
        width:30vw;
        height:30vw;
        border:1px solid #ccc;
        background: pink;
        left:35vw;
        top:35%;
    }
    <div class="vw_vh"></div>
    

    通过vw vh实现的布局可以适应浏览器的resize改变。
    在这里插入图片描述
    vw vh结语
    vw vh可以方便我们实现很多特殊布局,而免去了js的计算,这是css3的一大进步,我们要善加利用。从而简化我们的前端工作。依靠浏览器支持实现的布局,比我们通过js计算实现的布局总是要完美一些。而切vw,vh的兼容性情况很乐观。随着windows10的越来越普遍,越来越完善,IE8浏览器正在逐步消失,即使是一些PC端的页面,我们也可以抛弃IE8浏览器,让CSS3大放光彩。

    展开全文
  • css中,vw是一种视窗单位,也是相对单位。相对于视口的宽度,视口被均分为100单位的vw。在css中,vw是一种视窗单位,也是相对单位。相对于视口的宽度,视口被均分为100单位的vw。下面本篇文章就来给大家介绍一下,...

    在css中,vw是一种视窗单位,也是相对单位。相对于视口的宽度,视口被均分为100单位的vw。

    在css中,vw是一种视窗单位,也是相对单位。相对于视口的宽度,视口被均分为100单位的vw。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。

    34b4b9ac8945b0800af1416122c37898.png

    CSS 单位是一种量度单位,包括尺寸单位和颜色单位。我们常使用向对单位,不会使得网页在不同的视图下造成布局混乱的情况。

    vw是Viewport's width的缩写形式,1vw永远等于当前视口宽度的百分之一。vw是一种视窗单位,也是相对单位。相对于视口的宽度,视口被均分为100单位的vw。

    vw优势在于能够直接获取宽度,而用 % 在没有设置 body 宽度的情况下,是无法正确获得可视区域的宽度的,所以这是挺不错的优势。

    这里的视口指的是浏览器可视区域,图示如下:

    a2519a6a5b77d1611399a4b2ca3ad364.png

    示例代码:h1{font-size:8vw;}

    如果视口的宽度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100

    兼容性:

    304facf127dfa551265799a5e1775231.png

    示例:

    p{font-size:5vw;}

    相对于viewport宽度大小的文字

    展开全文
  • 对于前端工程师来说,不想面对又不得不面对的一个问题就是兼容...本文将详细介绍CSS兼容性。盒模型属性【宽高width/height】(全兼容)widthheight(IE6-不支持)min-widthmax-widthmin-heightmax-height【内边距paddin...
  • 一般而言,目前比较主流的应该就是rem和vw,关于这些文章网络博客上应该已经挺多的(rem的兼容性相对于vw更好),今天看到张鑫旭的一篇博客,觉得写的挺好的: ...经过大型项目实践,下面这段CSS是最好的基于rem和vm和calc...
  • vw,vh单位在移动端浏览器不兼容,在网上找半天也没找到什么官方的解决方法;我就试了一下在使用到vh的单位之前添加一个用px定义的样式; 如: 当浏览器不是别100vw单位的时候 就会赋给px单位的样式; 转载于:...
  • 今天给大家介绍的是vw兼容方案,其原理就是根据视口宽度自动计算页面上的尺寸,无论高度、宽度,还是字体。 第一步:用vue-cli快速构建出一个项目 通过脚手架生成的项目应该是如下结构: 第二步:安装插件 为了实现...
  • 根据CSS3规范,视口单位主要包括以下4个: 1.vw:1vw等于视口宽度的1%。 2.vh:1vh等于视口高度的1%。 3.vmin:选取vw和vh中最小的那个。 4.vmax:选取vw和vh中最大的那个。 vh and vw:相对于视口的高度和宽度,而...
  • 原因:经调查,为CSS中高度或者宽度指定为VW,但是未被浏览器兼容(IIS部署与本地区别未知) width: 30vw; height: 30vw; 解决方案 方案一(推荐): 如果当前IE浏览器安装了GCF插件,则以chrome内核渲染页面,否则...
  • 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动这篇文章发布于 2015年01月25日,星期日,23:08,归类于css相关。 阅读 46274 次, 今日 91 次byzhangxinxufromhttp://www.zhangxinxu.com本文地址:...
  • CSS样式兼容IE6、IE7、IE8、FF火狐浏览器的方法
  • CSS语言:CSSSCSS确定.full-width {/* setting padding left and right here will keep your content from spanning the entire container *//* avoid setting padding in shorthand elsewhere to prevent ...
  • css 兼容 ie8 汇总
  • 二、CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动 很简单,只要一行代码就搞定了: .wrap-outer { margin-left: calc(100vw - 100%); } 或者: .wrap-outer { padding-left: calc(100vw - 100%)...
  • postcss-px-to-viewport 必须使用行内样式时 let nowVW = widthVal/(1920/100);
  • css中,vw是一种视窗单位,也是相对单位。相对于视口的宽度,视口被均分为100单位的vw。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。CSS 单位是一种量度单位,包括尺寸单位和颜色单位。我们常使用向对...
  • CSSvw移动端适配

    2019-12-29 18:02:21
    目录 一、概述 二、详解 一、概述 在PC端,视口是指浏览器的可视区域。在移动端,视口(viewport)分为三种,其一布局...(1) vw 相对于视口的宽度, 视口宽度是100vw, 1vw = 视口宽度的1% (2) vh 相对于视口...
  • CSS兼容性详解

    2020-01-19 21:59:45
    对于前端工程师来说,不想面对又不得不面对的一个问题就是兼容性。...本文将详细介绍CSS兼容性 盒模型属性 【宽高width/height】 (全兼容) width height (IE6-不支持) min-width max-width min-height max-height...
  • 其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们...
  • 比如rem、em、vw和v,对于写移动端的小伙伴们来说rem和em都相对熟悉,今天文汇软件小编给大家详细讲下vw和vh的使用。首先我们先大体讲下常用单位的简单介绍。px像素作为我们平时最常用的单位,它指的是单位面积内的...
  • CSSvw和vh

    2019-12-17 17:14:42
    vw 说明: 相对于视口的宽度,视口被均分为100单位的vw h1 { font-size: 8vw; } 如果视口的宽度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100 vh 说明: 相对于视口的高度。视口被均分为...
  • 移动端中利用rem的相对于根HTML进行改变,通过一段时间JS实现了移动端自适应,本文则使用纯CSS视口单位来自行自适应,虽然现在的兼容性还没法完全能够接受,但不妨碍你认识这个vw和vh的强大。响应式布局的实现依靠...
  • CSS3兼容IE的大杀器

    2014-11-19 16:20:00
    经过长久以来的不懈努力,我终于成功的将selectivizr与PIE这两个解决css3的利器进行了深度的整合,大大降低了使用难度 <...只要在你的页面上加入这一行代码,整个页面全部兼容css3,不要忘了将...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,091
精华内容 1,636
关键字:

cssvw兼容