Meta-Abschnitt

1. Viewport-Breite

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

Wobeiwidth=device-widthdient dazu, die Viewport-Breite auf die Viewport-Breite des Geräts festzulegen; Sie können auch eine feste Breite festlegen, zum Beispiel:width=640wäre eine Breite von 640px (häufig in WeChat zu sehen);

initial-scale=1.0: legt das Zoomverhältnis auf 1.0 fest;

minimum-scale=1.0undmaximum-scale=1.0: minimales Zoomverhältnis und maximales Zoomverhältnis;

user-scalable=no: verbietet Benutzern das freie Zoomen,user-scalableder Standardwert istyes 。

Tipp: Der obige enthält alle Parameter. Für den üblichen Gebrauch: das Vorhandensein vonuser-scalable=nobedeutet, dass Sie nicht verwenden müssenminimum-scale=1.0undmaximum-scale=1.0um das Zoomen zwangsweise zu deaktivieren.

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>

2. Formate automatisch erkennen

<meta name="format-detection" content="telephone=no"/>

contentDie Parameter darin:telephone=nodient dazu, das automatische Erkennen von Telefonnummern durch den Browser zu deaktivieren,email=nodient dazu, das automatische Erkennen von E-Mail durch den Browser zu deaktivieren.

3. Vollständige Vorlage

<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-Abschnitt

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的语音输入按钮*/
}

Abschnitt „Flex-Grundlagen“

Angenommen, der Flex-Container ist.box, und die untergeordneten Elemente sind.item 。

1. Den Container als Flex-Layout definieren

.box{
    display: -webkit-flex; /*webkit*/
    display: flex;
}

/*行内flex*/
.box{
    display: -webkit-inline-flex; /*webkit*/
    display:inline-flex;
}

2. Container-Stile

.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. Stile untergeordneter Elemente

.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;
    /*单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
}

Abschnitt „Tipps und Tricks“

1. Benutzerdefiniertes Apple-Symbol

Legen Sie eine Datei im Stammverzeichnis der Website abapple-touch-icon.pngDatei. Wenn Apple-Geräte die Website als Lesezeichen oder Desktop-Verknüpfung speichern, wird diese Datei als Symbol verwendet. Die empfohlene Dateigröße ist: 180px × 180px.

2. Benutzerdefiniertes Favicon:

<link rel="icon" href="../favicon.ico" mce_href="../favicon.ico" type="image/x-icon">

3. Browser-Klickverhalten definieren:

<a href="020-10086.html">打电话给:020-10086</a>
<a href="10086.html">发短信给: 10086</a>
<a href="me@22278.club.html">发送邮件: me@22278.club</a>

4. Upload-Dateitypen und -formate definieren

<input type=file accept="image/*">

Im Datei-Upload-Feld oben,acceptkönnen Sie den Typ der hochgeladenen Dateien einschränken; der Parameter istimage/*bedeutet alle Bildtypen. Ein Klick darauf öffnet die Galerie. Sie können auch ein Bildformat angeben, indem Sie den Parameter aufimage/pngwürde den Bildtyp auf png beschränken; wenn der Parametervideo/*bedeutet es die Auswahl von Video;acceptSie können auch mehrere Dateiformate festlegen; die Syntax istaccept="image/gif, image/jpeg" ；

5. Verwendenbox-shadowDas Gelb nach der Formular-Autovervollständigung ändern (blockieren)

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
    box-shadow:inset 0 0 0 1000px #fff;
}

6. Mit CSS Textkürzung mit Auslassungspunkten erreichen

white-space: nowrap;
text-overflow: ellipsis;

7. Mit border kleine Dreiecke zeichnen

Das Prinzip ist: Die oberen/unteren und linken/rechten Rahmen treffen in einem diagonalen Winkel aufeinander. Mithilfe dieser Eigenschaft macht man eine Seite des Rahmens transparent, setzt die andere Seite auf die gewünschte Farbe und versteckt die gegenüberliegende Seite, und schon entsteht eine kleine Pfeilform.

border-width: 10px 10px 10px 0; //左箭头
border-color: transparent #fff;
border-style: solid;
width: 0;

Tooltip-Schreibweise:

<!--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: "";
}

Artikelquelle:Mobile WEB Frontend-Entwicklung Ressourcenintegration - Xixi
Artikelautor: Bon
Urheberrechtshinweis: Freier Nachdruck - Nicht kommerziell - Keine Bearbeitung - Namensnennung beibehalten (Creative Commons 3.0 Lizenz) Bitte die Quelle für den Nachdruck angeben.