100vw相对于浏览器的window.innerWidth,是浏览器的内部宽度,注意,滚动条宽度也计算在内!而100%是可用宽度,是不含滚动条的宽度. demo: h1{font-size:8vw;} 如果视口的宽度是200mm,那么上述代码中h1元素的字号将为16mm,即200/100*8mm CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动 .wrap-outer { padding-left: calc(100vw - 100%); } 或者 .wrap-outer { marg

一.CSS长度值 em 相对于父元素的字体大小 ex 相对于小写字母"x"的高度 gd 一般用在东亚字体排版上,这个与英文并无关系 rem 相对于根元素字体大小 vw 相对于视窗的宽度:视窗宽度是100vw vh 相对于视窗的高度:视窗高度是100vh vm 相对于视窗的宽度或高度,取决于哪个更小 ch 相对于0尺寸 px 相对于屏幕分辨率而不是视窗大小:通常为1个点或1/72英寸 in inch, 表英寸 cm centimeter, 表厘米 mm millimeter, 表毫米 p

这个方法其实已经使用很久了,之前主要在嵌入式WebQQ等产品中用过,现在拿出来分享一下吧,是目前最简洁的方式来实现ie6的position:fixed; 失效bug,以及的其他方法的闪动问题,CSS代码如下,很简单,自行修改调试即可: html{ _background:url(about:blank); /* 阻止闪动 in IE6 , 把空文件换成about:blank , 减少请求 */ } /* 你的图层 */ .positionFixedLayer{ position:fixed; _

注:滚动条是导致页面切换标签页闪动的原因 html{ /*隐藏滚动条,当IE下溢出,仍然可以滚动*/ -ms-overflow-style:none; /*火狐下隐藏滚动条*/ overflow:-moz-scrollbars-none;} //谷歌适用::-webkit-scrollbar{ display:none;}

先回顾下前文高性能JavaScript DOM编程,主要提了两点优化,一是尽量减少DOM的访问,而把运算放在ECMAScript这一端,二是尽量缓存局部变量,比如length等等,最后介绍了两个新的API querySelector()以及querySelectorAll(),在做组合选择的时候可以大胆使用.而本文主要讲的是DOM编程可能最耗时的地方,重排和重绘. 1.什么是重排和重绘 浏览器下载完页面中的所有组件--HTML标记.JavaScript.CSS.图片之后会解析生成两个内部数据结构

DOM编程可能最耗时的地方,重排和重绘. 1.什么是重排和重绘 浏览器下载完页面中的所有组件——HTML标记.JavaScript.CSS.图片之后会解析生成两个内部数据结构——DOM树和渲染树. DOM树表示页面结构,渲染树表示DOM节点如何显示.DOM树中的每一个需要显示的节点在渲染树种至少存在一个对应的节点(隐藏的DOM元素disply值为none 在渲染树中没有对应的节点).渲染树中的节点被称为“帧”或“盒“,符合CSS模型的定义,理解页面元素为一个具有填充,边距,边框和位置的盒子.一旦

1.什么是重排和重绘 浏览器下载完页面中的所有组件--HTML标记.JavaScript.CSS.图片之后会解析生成两个内部数据结构--DOM树和渲染树. DOM树表示页面结构,渲染树表示DOM节点如何显示.DOM树中的每一个需要显示的节点在渲染树种至少存在一个对应的节点(隐藏的DOM元素disply值为none 在渲染树中没有对应的节点).渲染树中的节点被称为"帧"或"盒",符合CSS模型的定义,理解页面元素为一个具有填充,边距,边框和位置的盒子.一旦DOM和渲染

针对手游的性能优化,腾讯WeTest平台的Cube工具提供了基本所有相关指标的检测,为手游进行最高效和准确的测试服务,不断改善玩家的体验.目前功能还在免费开放中. 点击地址:http://wetest.qq.com/cube立即体验! 作者:Hoolly,腾讯移动客户端开发工程师. 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处 WeTest导读 安卓开发者都知道,RecyclerView比ListView要灵活的多,但不可否认的里面的坑也同样埋了不少人.下面让我们看看腾讯开发工程

主要参考: https://blog.madewithlove.be/post/webpack-your-bags/ 起因: 作为运维狗, 对前端一窍不通但心向往之, 最近做一个Dashboard, 注意到 bootstrap, echarts, vuejs 都提供 npm 的下载, 最开始是手动复制粘贴 min.css, min.js 文件到静态目录, 后来觉得这实在是太low了, 然后才知道 webpack 这等神器. webpack基本原理 import stylesheet from '

一.ie9不支持line-height字体垂直居中兼容问题    原因:CSS中使用了中文字体,而中文字体使用汉字.如:font-family:"微软雅黑"   1.将中文字体汉字转换为Unicode编码       “黑体”对应Unicode编码为“\9ED1\4F53”       “宋体”对应Unicode编码为“\5B8B\4F53”       “仿宋”对应Unicode编码为“\4EFF\5B8B”       “微软雅黑”对应Unicode编码为“\5FAE\8F6F\9

动画效果在网站中是一种非常常见的交互式体验效果,比如侧边栏分享.图片淡入淡出,我们把这种动画效果就叫做运动,也就是让物体动起来.如果想让一个物体动起来,无非就是改变它的速度,也就是改变属性值,比如 left.right.width.height.opacity ,那么既然是运动,就可以分为很多种,如匀速运动.缓冲运动.多物体运动.任意值运动.链式运动和同时运动.我们从最简单的动画开始,如何让单个物体运动,逐步深入多物体运动.多动画同时运动到实现完美运动框架的封装,在这个过程中,每一个运动都封装为

最近,在公司给一些刚刚使用vue进行开发的同学做了一次分享, 其中包括一些vue开发中需要注意的点, 以及一些可能会踩到的坑.具体内容如下: 一.生命钩子使用需要注意的地方 1.beforeCreate文档描述:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用.注意: 在这个钩子上,this变量还不能使用,data里的属性,methods方法里的方法,watcher中的事件都无法获得:2.created文档描述:在实例创建完成后被立即

学习编程,与君共勉. 在做过一些页面并且参考了许多商城页面后,对代码的书写和风格也有所体会,再次将我的经验分享给大家,希望大家也能够写出整洁有效的代码.本文主要是针对排版的问题进行总结,代码量较少,希望能够耐心看下去,或多或少都有些帮助. 这里是对页面排版部分——HTML部分的介绍,当然后续也会有CSS样式,JS的介绍,以及通过JQuery的书写给大家呈现大多数页面共同的地方. 一 梳理排版 善于利用div.div就像一个盒子,将你想要写的这一块代码包起来,所以在设计页面时,看清div的闭合,你

前言 安卓开发者都知道,RecyclerView比ListView要灵活的多,但不可否认的里面的坑也同样埋了不少人.下面让我们看看腾讯开发工程师用实例讲解自己踩坑时的解决方案和心路历程. 话说有图有真相,首先来对比一下局部刷新前后的效果: 优化之前的效果: 优化之后的效果: 可以看到,优化之后,列表中的这张大图不在有一闪一闪亮晶晶的效果了! 那么,这是如何做到的呢?这是本文的重点,本文的大纲主要包括: 分析为什么会闪一下 对分析的可能造成闪动的问题进行解决 验证是否解决 一.为什么会闪一下? 我

前言 作为一名前端工程师,我们不仅要会PC端开发,还要会移动端开发,而且现在移动端占据主要流量,所以掌握移动端开发的技能更是必须的. 那么进行移动端的开发,什么是必须,我们想要的效果是什么? 自适应.对,我们想要的效果应该是网页上的元素能随着窗口大小的变化而跟着同比的变化. 假如我们拿到一张750px宽的设计图,上面有一个元素是75px宽,当这张页面出现在只有540px宽的设备上,这个元素就得是54px宽. 如果你使用px这种固定的长度单位,在不同大小的设备上会出现什么情况,不用我说你也知道吧.

文档对象dom是javascript与页面元素的桥梁 选择器的作用就是通过元素的标签名,属性名,css属性名对页面进行快速,准确的定位及选择 Extjs的选择器:Ext.DomQuery Ext.query(path[,root,type]) path:查询要使用的选择符,或xpath root:查询开始的节点或节点id.如果不设置,默认为document对象,为了提高速度,不要使用document开始查询 type:查询的类型,值可以为select和simple,当值为simple时使用id或

九月已成历史,十月如期而至...可能是九月工作比较清闲,周记就没怎么写,十月决不能这么堕落,立贴为证,至少保证5篇博客!!!如果没学到什么新知识,就对以往的那些工作中常用到的知识点做个总结...话不多说,今天就来谈谈移动端的rem适配...本文将从rem是什么.为什么要用rem适配.怎么用rem来讲解,保证浅显易懂... 1.什么是rem rem(font size of the root element)是指相对于根元素(<html>)的字体大小的单位.简单的说它就是一个相对单位.看到rem

  在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像的设置在后续介绍到各种图绘制时介绍). 这里所说的文本是指在使用matplotlib作图过程中通过代码的方式往图中添加的各种文字,包括figure标题.axes标题.坐标轴标签.坐标轴刻度标签.注释.普通文本等.轴设置指的是对与坐标轴相关的的元素的设置,例如显示范围.刻度.刻度标签等. In [1]

IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath)} 常用的解决方案: 在页面底部添加以下IE6专用代码,让IE6缓存CSS背景图片至本地,这样a:hover时IE6就不会再重新向服务器请求加载背景图片了. XML/HTML代码 <!–[if IE 6]> <script type=”text/javascript”> docume

来源:http://www.css88.com/archives/744 ------------------------------------------------------------------------------------------------- IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath)} 常用的解决方案: 在页面

原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽度,然后margin: 0 auto的节奏~ 例如,妇女之友大淘宝的首页: 然而,这种布局有一个存在一个影响用户体验的隐患.应该都知道,现代浏览器滚动条默认是overflow:auto类型的,也就是如果尺寸不足一屏,没有滚动条:超出,出现滚动条.于是,问题来了: 信息流页面,如新浪微博,是从上往下p