移动WEB前端开发资源整合
meta篇
1.视窗宽度
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
其中 width=device-width 是设置视窗宽度为设备视窗宽度,还可以固定宽度,例如: width=640 则是640px的宽度(常见于微信);
initial-scale=1.0 :设置缩放比例为1.0;
minimum-scale=1.0 和 maximum-scale=1.0 :最小缩放比例和最大缩放比例;
user-scalable=no :禁止用户自由缩放,user-scalable 默认值为 yes 。
提示:刚刚那个是带全部参数的,一般常用的,有 user-scalable=no 就不用使用 minimum-scale=1.0 和 maximum-scale=1.0 来强制禁止缩放了。
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
2.自动识别格式
<meta name="format-detection" content="telephone=no"/>
content
里面的参数:telephone=no
是禁止浏览器自动识别手机号码,email=no
是禁止浏览器自动识别Email。
3.完整模板
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="email=no"/>
CSS篇
body {
font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; /*使用无衬线字体*/
} a, img {
-webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
} html, body {
-webkit-user-select: none; /*禁止选中文本*/
user-select: none;
} button,input,optgroup,select,textarea {
-webkit-appearance:none; /*去掉webkit默认的表单样式*/
} a,button,input,optgroup,select,textarea {
-webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
} input::-webkit-input-placeholder {
color:#ccc; /*修改webkit中input的planceholder样式*/
} input:focus::-webkit-input-placeholder {
color:#f00; /*修改webkit中focus状态下input的planceholder样式*/
} body {
-webkit-text-size-adjust: 100%!important; /*禁止IOS调整字体大小*/
} input::-webkit-input-speech-button {
display: none; /*隐藏Android的语音输入按钮*/
}
Flex基础篇
这里假设flex容器为 .box
,子元素为 .item
。
1.定义容器为flex布局
.box{
display: -webkit-flex; /*webkit*/
display: flex;
} /*行内flex*/
.box{
display: -webkit-inline-flex; /*webkit*/
display:inline-flex;
}
2.容器样式
.box{
flex-direction: row | row-reverse | column | column-reverse;
/*主轴方向:左到右(默认) | 右到左 | 上到下 | 下到上*/ flex-wrap: nowrap | wrap | wrap-reverse;
/*换行:不换行(默认) | 换行 | 换行并第一行在下方*/ flex-flow: <flex-direction> || <flex-wrap>;
/*主轴方向和换行简写*/ justify-content: flex-start | flex-end | center | space-between | space-around;
/*主轴对齐方式:左对齐(默认) | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/ align-items: flex-start | flex-end | center | baseline | stretch;
/*交叉轴对齐方式:顶部对齐(默认) | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/ align-content: flex-start | flex-end | center | space-between | space-around | stretch;
/*多主轴对齐:顶部对齐(默认) | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布*/
}
3.子元素样式
.box{
flex-direction: row | row-reverse | column | column-reverse;
/*主轴方向:左到右(默认) | 右到左 | 上到下 | 下到上*/ flex-wrap: nowrap | wrap | wrap-reverse;
/*换行:不换行(默认) | 换行 | 换行并第一行在下方*/ flex-flow: <flex-direction> || <flex-wrap>;
/*主轴方向和换行简写*/ justify-content: flex-start | flex-end | center | space-between | space-around;
/*主轴对齐方式:左对齐(默认) | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/ align-items: flex-start | flex-end | center | baseline | stretch;
/*交叉轴对齐方式:顶部对齐(默认) | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/ align-content: flex-start | flex-end | center | space-between | space-around | stretch;
/*多主轴对齐:顶部对齐(默认) | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布*/
}
小技巧篇
1.自定义苹果图标
在网站文件根目录放一个 apple-touch-icon.png
文件,苹果设备保存网站为书签或桌面快捷方式时,就会使用这个文件作为图标,文件尺寸建议为:180px × 180px。
2.自定义favicon
<link rel="icon" href="favicon.ico" mce_href="favicon.ico" type="image/x-icon">
3.定义浏览器点击行为
<a href="tel:020-10086">打电话给:020-10086</a>
<a href="sms:10086">发短信给: 10086</a>
<a href="mailto:me@22278.club">发送邮件: me@22278.club</a>
4.定义上传文件类型和格式
<input type=file accept="image/*">
上面的文件上传框中,accept
可以限制上传文件的类型,参数为 image/*
是所有图片类型,点击会弹出图库,也可以指定图片格式,参数设置成 image/png
则可以限制图片类型为png;参数如果为 video/*
则是选择视频的意思;accept
还可以设置多个文件格式,语法为 accept="image/gif, image/jpeg"
;
5.使用box-shadow改变(挡住)表单自动填充后的黄色
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
box-shadow:inset 0 0 0 1000px #fff;
}
6.用CSS实现省略号文字截断
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
7.使用border绘制小三角
原理是:上下和左右的边框对接其实是个斜角,利用这个特性,使其中一边的边框透明,另外一边写成想要的颜色并隐藏对边,就可以变成小箭头形状。
border-width: 10px 10px 10px 0; //左箭头
border-color: transparent #fff;
border-style: solid;
width: 0;
Tootip写法:
<!--html-->
<div class="box"></div>
/*--css--*/
.box{
position: relative;
padding: 0 20px;
width: 380px;
height: 80px;
border-radius: 8px;
background: #efefef;
font-size: 18px;
line-height: 80px;
}
.box:after{
position: absolute;
top: 50%;
left: -15px;
z-index: 1;
display: block;
margin-top: -15px;
width: 0;
border-color: transparent #efefef;
border-style: solid;
border-width: 15px 15px 15px 0;
content: "";
}
作者:Bon
原文地址:http://www.ccwebsite.com/development-of-resource-integration-in-mobile-terminal/
移动WEB前端开发资源整合的更多相关文章
- (转载)移动WEB前端开发资源整合
收藏起来,感谢原文大大:Bon~~~ 原文链接:http://www.ccwebsite.com/development-of-resource-integration-in-mobile-termi ...
- HTML5+CSS3前端开发资源整合
HTML5+CSS3前端开发资源整合 推个广告 个人网站:http://www.51pansou.com HTML5视频下载:HTML5视频 HTML5源码下载:HTML5源码 meta相关: & ...
- 极客Web前端开发资源大荟萃#001
每周极客都将总结本周最精彩的素材提供给大家,希望可以带给你更多地灵感和帮助!极客#GB课程库#现已上线,无论你是初级.中级.还是正在进修的高级前端工程师.这里都将帮助你得到更多更高效的学习.原文:极客 ...
- 极客Web前端开发资源大荟萃
前端开发已经成为当前炙手可热的技术之中的一个.本周我们除了给大家带技术相关资讯,另一些技术人员经常使用的站点.希望大家不要错过我们本周的内容.原文来自:极客标签 为神马说敲代码是非常艰难的 程序猿 做 ...
- 极客Web前端开发资源集锦
本周我们带来的前端推荐包含当前热门的bootstrap,html5,css3等技术内容和新闻话题,如果你还想近一步学习如何开发,还可以关注我们的极客课程库,里面涵盖了现代开发技术的‘学’与‘习’的全新 ...
- Web前端开发资源集锦
前端开发已经成为当前炙手可热的技术之一.本周我们除了给大家带技术相关资讯,还有一些技术人员常用的网站.希望大家不要错过我们本周的内容.原文来自:极客标签 为神马说写程序是很艰难的 程序员 做一名优秀程 ...
- web前端开发资源分享:学习计划及资料推荐
HTML & CSS W3C官网 HTML学习 CSS学习 书籍: <Head First HTML与CSS.XHTML(中文版)><CSS禅意花园(修订版)> 视频 ...
- web前端开发资源整理
webpack中文文档 http://webpackdoc.com/index.html 饿了么UI http://mint-ui.github.io/#!/zh-cn http://element. ...
- 移动WEB前端开发资源的一些素材
meta篇: <meta name="viewport" content="width=device-width,initial-scale=1.0,user-sc ...
随机推荐
- Java基础-重写方法
一般我们需要在新类上重写,两个类的实现: class Animal{ public void move(){ System.out.println("动物可以移动"); } } c ...
- linux 遇见的问题
Permissions 0644 for '/root/.ssh/id_rsa' are too open.问题 如果出现 Permissions 0644 for '/root/.ssh/id_rs ...
- python 模块基础介绍
从逻辑上组织代码,将一些有联系,完成特定功能相关的代码组织在一起,这些自我包含并且有组织的代码片段就是模块,将其他模块中属性附加到你的模块的操作叫做导入. 那些一个或多个.py文件组成的代码集合就称为 ...
- 【Tomcat】tomcat报连接超时错误
程序一直报这个错误 [getui-server][ERROR] [2016-03-17 10:50:00] getui.task.HftMongoInfoTask.execute(137) | --H ...
- Java重点识记
1.final修饰的类不能被继承,已经达到类层次中的最低层. 2.abstract修饰的类或成员方法,表明是抽象的,含有抽象方法的类必须说明是抽象类,必须派生出子类. 3.JAVA对逻辑与和逻辑或提供 ...
- 3、CCS样式表
一.CCS样式表的分类(优先级从低到高): 1.浏览器默认样式表 2.外部样式表:在外部创建的.ccs文件中.使用外部样式表可以使样式应用于多个网页.通过这个方法只需改动一个文件就能改变整个网站的外观 ...
- windows7安装GitBash和GitGui
安装很简单,搜索安装就行. 配置: 1.$ ssh-keygen -t rsa -C "your_email@youremail.com" 将"your_email@yo ...
- [Math & Algorithm] 拉格朗日乘数法
拉格朗日乘数法(Lagrange Multiplier Method)之前听数学老师授课的时候就是一知半解,现在越发感觉拉格朗日乘数法应用的广泛性,所以特意抽时间学习了麻省理工学院的在线数学课程.新学 ...
- 在GridView隐藏字段
在GridView中隐藏一字段,方便这条记录的处理,同时隐藏一个Button实现点击这条记录时的处理 1.绑定 <asp:TemplateField> ...
- Linux C 静态库(.a) 与 动态库(.so) 的详解
库从本质上来说是一种可执行代码的二进制格式,可以被载入内存中执行.库分静态库和动态库两种. 一.静态库和动态库的区别 1.静态函数库 这类库的名字一般是libxxx.a:利用静态函数库编译成的文件比较 ...