网站关键词是什么,wordpress个人网站赚钱,pdf viewer wordpress,设计制作散发寄递包括内容: css初始化、css全局设置、常用meat标签、rem适配、flex布局、相关技巧#xff08;手势库使用、多行截字、1像素边线、点击状态、placeholder居中等#xff09; reset 引用 normalize.css css全局设置 包括字体、行高、默认webkit浏览器属性重置 meta标签(禁用长按…包括内容: css初始化、css全局设置、常用meat标签、rem适配、flex布局、相关技巧手势库使用、多行截字、1像素边线、点击状态、placeholder居中等 reset 引用 normalize.css css全局设置 包括字体、行高、默认webkit浏览器属性重置 meta标签(禁用长按下载保存、禁止数字识别为号码等) rem公式和sass函数(如何根据设计稿换算单位并且写好sass函数 pxTorem) 参考, Sass基础——Rem与Px的转换 flex布局 参考腾讯isux的 移动端全兼容的flexbox速成班 单行、多行的截字 按钮active状态 白色橡树的博客中提到了 模拟按钮hover效果 手势库使用hammerJS 高清屏1像素边框 移动web 1像素边框 瞧瞧大公司是怎么做的 placeholder属性设置的文字向上偏移的厉害 placeholder属性设置的文字向上偏移的厉害 reset 引用 Normalize介绍 - 下载地址 浏览器支持情况Chrome, Firefox, Opera, Safari 6, IE 8Normalize.css 是一个可以定制的CSS文件它让不同的浏览器在渲染网页元素的时候形式更统一。 css全局设置 行高字号颜色什么的就根据项目的视觉规范自己来定义比较重要的是移动端的字体和a链接以及表单元素的初始化样式。 body {font-family: Helvetica Neue, Helvetica, STHeiTi, sans-serif; } a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0;) -webkit-user-modify:read-write-plaintext-only; } input[typenumber]::-webkit-textfield-decoration-container { background-color: transparent; } input[typenumber]::-webkit-inner-spin-button { -webkit-appearance: none; } input[typenumber]::-webkit-outer-spin-button { -webkit-appearance: none; } input{-webkit-appearance:none;} meta标签 主要是定义了比例苹果全屏显示、状态条颜色、禁止数字识别为电话号码、禁止邮件识别为链接 具体根据需求增加。 meta contentwidthdevice-width,initial-scale1.0,maximum-scale1.0,user-scalableno nameviewport meta contentyes nameapple-mobile-web-app-capable meta contentblack nameapple-mobile-web-app-status-bar-style meta contenttelephoneno nameformat-detection meta contentemailno nameformat-detection rem公式和sass函数 1、页面加上js (通用代码)2、根据公式算出数值 (设计稿宽度/320)*20 3、编写sass函数 函数中 40 就根据公式2算出来的结果 可以参考《Sass基础——Rem与Px的转换》4、在sass 文件中 直接调用height:px(492) //sass 方法
function px($px){ return ($px/40)rem; } //js代码
;(function(win, doc){ function change(){ doc.documentElement.style.fontSize20*doc.documentElement.clientWidth/320px; } change(); win.addEventListener(resize, function(){ change(); }, false); })(window, document); flex布局 网上关于flex的介绍很多此处不再展开 参考《移动端全兼容的flexbox速成班》 /* flex定义布局为盒模型flex-v盒模型垂直布局flex-1子元素占据剩余的空间flex-align-center子元素垂直居中flex-pack-center子元素水平居中flex-pack-justify子元素两端对齐兼容性ios 4、android 2.3、winphone8 */
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;} .flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;} .flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;} .flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;} .flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;} .flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;} 单行、多行的截字 //单行css截字
div{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
} //多行截字
div{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;
} 按钮active状态 自己按照网上的方式做了例子虽然都有active的效果了但是响应速度不一样最快的还是js的方式。 !DOCTYPE html
html
head meta charsetutf-8 meta contentwidthdevice-width,initial-scale1.0,maximum-scale1.0,user-scalableno nameviewport meta contentyes nameapple-mobile-web-app-capable meta contentblack nameapple-mobile-web-app-status-bar-style meta contenttelephoneno nameformat-detection meta contentemailno nameformat-detection style typetext/css a{-webkit-tap-highlight-color: rgba(0,0,0,0);} .btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;} .btn-blue-on{background-color: #357AE8;} /style /head body div classbtn-blue按钮/div script typetext/javascript var btnBlue document.querySelector(.btn-blue); btnBlue.ontouchstart function(){ this.className btn-blue btn-blue-on } btnBlue.ontouchend function(){ this.className btn-blue } /script /body /html 手势库使用hammerJS hammer是一个移动端是手势库 http://hammerjs.github.io/ 这是他们的官网这些英文不是太难利用翻译软件应该就能轻松学习具体细节不再展开只贴一个简单的demo代码吧。 !DOCTYPE html
html langen head meta charsetUTF-8 titlehammer.js/title style #div{ width: 100px; height: 100px; background: red;transition:transform 1s; margin:100px auto;} /style script srchammer.min.js/script /head body div iddiv/div script typetext/javascript var el document.getElementById(div); Hammer(el).on(swipeleft,function(e){ // alert(快速左滑成功); console.log(e.deltaX); el.style.transformtranslateX(e.deltaXpx); }); /script /body /html 高清屏1像素边框 实现方式很多主要原理还是通过调整viewpor的缩放比或者将1px的元素压缩0.5来实现移动web 1像素边框 瞧瞧大公司是怎么做的文章写得比较详细看完就能明白了下边的代码是用 border-images 使用base64的图片实现的。 .border-image-1px {border-width: 1px 0px; -webkit-border-image: url(data:image/png;base64,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) 2 0 stretch; } placeholder属性设置的文字向上偏移 在查看京东、糯米、美团等一些webapp的时候也发现有苹果和安卓不居中的情况而且很严重网上所设置这个属性但是没有效果并不好建议使用padding的形式我抽时间研究研究其他框架后再 //placeholder属性设置的文字向上偏移的厉害 Android4.x部分机型
inpu{line-height:normal
} 移动端相关知识点汇总资料 AlloyTeam 腾讯移动Web前端知识库 《面向亿万用户级的移动端Web解决方案》 腾讯微信支付设计中心白树的博文 【原】移动web资源整理 手Q开发 Mobile开发经验沉淀 移动端开发所需要的一些资源与小技巧 参考白色橡树的移动web资源整理 转载于:https://www.cnblogs.com/sybboy/p/6211167.html
