web挪动端与Hybird开辟学问整顿

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绘制小三角

道理是:高低和摆布的边框对接实际上是个斜角,应用这个特征,使个中一边的边框通明,别的一边写成想要的色彩并隐蔽对边,就能够变成小箭头外形。

《web挪动端与Hybird开辟学问整顿》

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前端开辟资源整合 – 兮兮】

    原文作者:javascriptMen
    原文地址: https://segmentfault.com/a/1190000018336818
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞