css3
清风笑~
display:none
展开
-
前端style的git提交验证
才记录了javascript的git提交验证,接下来是style的提交验资以less为列子先安装dev依赖npm install --save-dev stylelint stylelint-config-prettier stylelint-config-standard项目根目录下创建.stylelintrc 文件{ "extends": ["stylelint-config-...原创 2020-05-01 16:59:10 · 1424 阅读 · 2 评论 -
移动端适配webpack配置px转rem或vh,vw
移动端适配常用百分比,rem,后来又多了一个vh,vw。当然在less,sass可以写计算规则来转换px,比较麻烦,打包一次搞定就好px转rem的配置安装依赖npm install px2rem-loader -D --save配置loadervar px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75...原创 2020-02-19 20:29:59 · 3201 阅读 · 0 评论 -
前端DNS预读取
点开淘宝,F12看到淘宝head 元素里 有这么一个代码<link rel="dns-prefetch" href="//res.mmstat.com">dns-prefetch 字面理解就是 dns预取或者预解析,解析后存储在缓存里,一次dns查询一次的时间大概能在60-120ms,对于复杂的网页,分秒必争,也算时间长了。如此通过rel="dns-prefetch"可以将当...原创 2019-12-08 20:32:14 · 351 阅读 · 0 评论 -
css3单位使用vh摆脱父级元素高度
在给元素设置高度时,一般使用px,但是当父类元素没有设置height时,子类设置height:*%,是没有高度的。main元素没有高度没设置,导致layout–1Ow-jP元素设置了高度为100%,也没有撑开,现有高度还是button元素的高度遇到这样的情况,只有从根元素开始html,body,root, main, layout--1Ow-jP { height: 100%}这样...原创 2018-11-27 17:31:58 · 1763 阅读 · 0 评论 -
vue-cli中 css3加前缀
看了在utils.js文件下添加修改//postcss: generateLoaders('postcss'),postcss:[require('autoprefixer')({ browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari &amp;gt;= 6', 'ie &amp;gt; 8'] })]或者pac...原创 2018-11-27 16:57:12 · 4018 阅读 · 1 评论 -
ionic,angularjs,requirejs 结合开发 web
基本套路:1、先安装node,配置好npm config set cache 和npm config set prefix2、安装android sdk 和 java 配置环境变量3、执行npm 命令安装 npm install -g cordova 和 npm install -g ionic4、运行 ionic start app(名字随意) 生成如下运行 ion...原创 2016-07-26 15:14:51 · 4376 阅读 · 0 评论 -
关于iphone 上touch事件动态改变元素位置时与touch点发生偏移的问题
写这个么个题目好像,有点晦涩。直接来张gif图就知道,主要是是当手指触摸到元素时,元素的初始位置变成了left:0, top:0; js 设置监听事件 都是 一样的套路 touch.addEventListener('touchstart', function(evtend) {}, false);touch.addEventListener('touchmove', fu...原创 2017-04-18 14:52:26 · 2449 阅读 · 0 评论 -
初步学习 ionic css 布局
ionic.css 布局是基于flex的,虽然没有bootstrap那么丰富,但基本的布局还是满足的。提供了字体的图标,可以自定义颜色。还是能基本满足icon需求吧。。。当然还是需要自己定义很多css 或者 覆盖原来的。入门的写下,也不知道对不对。。。。。 <!DOCTYPE html><html><head> <meta char...原创 2016-05-30 11:15:23 · 1980 阅读 · 0 评论 -
水果手机 Safari transform rotateY 不兼容问题
移动端写css3 时 发现在safari 上 一个元素使用了 transform:rotateY(19deg); 显示有问题。 .class{ transform: scale(0.85) rotateY(10deg); -moz-transform: scale(0.85) rotateY(10deg); -o-transform: scale(0.85)...原创 2016-04-08 15:08:20 · 7841 阅读 · 1 评论 -
浅撸 css3 flex 布局
放假无聊,五行缺撸,索性就这么撸篇博客咯,聊以自慰。css3 中flex布局 即为弹性布局,在实现响应式,是非常好的。当然对于传统的position,float布局,如果完全只考虑移动端很大程度上能做到去float化了。但是pc端就不行,需要考虑到ie6,ie7,ie8。。。。具体看自己公司咯。这么要求,真像一个现代穿着比基尼的大胸女人,却还要要求她裹脚。。扯远了····flex是用在父元...原创 2016-02-06 19:22:59 · 4472 阅读 · 0 评论