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款式*/:#f00; /*修正webkit中focus状态下input的planceholder款式*/
}}
body {{
-webkit-text-size-adjust: 100%!important; /*制止IOS调解字体大小*/-webkit-text-size-adjust: 100%!important; /*制止IOS调解字体大小*/
}}
input::-webkit-input-speech-button {::-webkit-input-speech-button {
display: none; /*隐蔽Android的语音输入按钮*/: 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|initial|inherit;
/*flex-direction :row | row-reverse | column | column-reverse | initial | inherit | 默许值是 "row"。*/
/*flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit | 默许值是 "nowrap"。*/
/* initial 设置该属性为它的默许值。*/
/* inherit 从父元素继续该属性。*/
/*主轴方向和换行简写*/
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.子元素款式
.item{
order: <integer>;
/*排序:数值越小,越排前,默许为0*/
flex-grow: <number>; /* default 0 */
/*放大:默许0(即假如有盈余空间也不放大,值为1则放大,2是1的双倍大小,以此类推)*/
flex-shrink: <number>; /* default 1 */
/*减少:默许1(假如空间不足则会减少,值为0不减少)*/
flex-basis: <length> | auto; /* default auto */
/*牢固大小:默许为0,能够设置px值,也能够设置百分比大小*/
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
/*flex-grow, flex-shrink 和 flex-basis的简写,默许值为0 1 auto,*/
align-self: auto | flex-start | flex-end | center | baseline | 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;
兼容参考:[链接形貌][1]
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: "";
}
;
【文章泉源:挪动WEB前端开辟资源整合 – 兮兮】