Section Méta

1. Largeur du viewport

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

Oùwidth=device-widthsert à définir la largeur du viewport sur la largeur du viewport de l'appareil ; vous pouvez également définir une largeur fixe, par exemple :width=640correspondrait à une largeur de 640px (couramment vu dans WeChat) ;

initial-scale=1.0: définit le rapport de zoom à 1.0 ;

minimum-scale=1.0etmaximum-scale=1.0: rapport de zoom minimum et rapport de zoom maximum ;

user-scalable=no: interdit aux utilisateurs de zoomer librement,user-scalablela valeur par défaut estyes 。

Astuce : Celui ci-dessus inclut tous les paramètres. Pour un usage courant, avoiruser-scalable=nosignifie que vous n'avez pas besoin d'utiliserminimum-scale=1.0etmaximum-scale=1.0pour désactiver de force le zoom.

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

2. Reconnaissance automatique des formats

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

contentLes paramètres à l'intérieur :telephone=nosert à désactiver la reconnaissance automatique des numéros de téléphone par le navigateur,email=nosert à désactiver la reconnaissance automatique des e-mails par le navigateur.

3. Modèle complet

<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"/>

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

Section Bases de Flex

Ici, on suppose que le conteneur flex est.box, et les éléments enfants sont.item 。

1. Définir le conteneur comme une mise en page flex

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

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

2. Styles du conteneur

.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. Styles des éléments enfants

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

Section Astuces et conseils

1. Icône Apple personnalisée

Placez un fichier dans le répertoire racine du site Webapple-touch-icon.pngfile. Lorsque les appareils Apple enregistrent le site Web en tant que signet ou raccourci sur le bureau, ce fichier sera utilisé comme icône. La taille de fichier recommandée est : 180px × 180px.

2. Favicon personnalisé :

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

3. Définir le comportement de clic du navigateur :

<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. Définir les types et formats de fichiers à téléverser

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

Dans la zone de téléversement de fichier ci-dessus,acceptvous pouvez restreindre le type des fichiers téléversés ; le paramètre estimage/*signifie tous les types d'images. Cliquer dessus fera apparaître la galerie. Vous pouvez également spécifier un format d'image en définissant le paramètre surimage/pngrestreindrait le type d'image à png ; si le paramètre estvideo/*cela signifie sélectionner une vidéo ;acceptVous pouvez également définir plusieurs formats de fichiers ; la syntaxe estaccept="image/gif, image/jpeg" ；

5. Utiliserbox-shadowChanger (bloquer) le jaune après l'auto-remplissage du formulaire

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

6. Utiliser CSS pour réaliser une troncature de texte avec points de suspension

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

7. Utiliser border pour dessiner de petits triangles

Le principe est : les bordures du haut/bas et de gauche/droite se rejoignent selon un angle diagonal. En utilisant cette caractéristique, rendez un côté de la bordure transparent, définissez l'autre côté sur la couleur souhaitée, et masquez le côté opposé, et cela devient une petite forme de flèche.

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

Écriture d'infobulle :

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

Source de l'article :Intégration de ressources pour le développement front-end Web mobile - Xixi
Auteur de l'article : Bon
Avis de copyright : Réimpression libre - Non commercial - Pas d'œuvres dérivées - Conserver l'attribution (Licence Creative Commons 3.0) Veuillez indiquer la source lors de la réimpression.