Comment utiliser rem+scss pour l'adaptation sur le téléphone mobile-Tutoriel H5-php.cn

Comment utiliser rem+scss pour l'adaptation sur le téléphone mobile

php中世界最好的语言

Libérer： 2018-01-30 09:38:28

original

3024 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser rem+scss pour l'adaptation sur le téléphone portable. Quelles sont les précautions pour l'adaptation rem+scss sur le téléphone portable. Ce qui suit est un cas pratique, jetons un coup d'oeil.

rem introduction

rem (taille de police de l'élément racine) fait référence à l'unité de taille de police par rapport à l'élément racine (c'est-à-dire élément html ).

Supposons que la taille de police de l'élément racine est de 10 px, alors la taille de 5rem est de 5*10 = 50 px, par exemple,

html{
    font-size: 10px;
}
p{
    width: 2rem; /* 2*10 = 20px;*/
    margin: 1rem;
}

Copier après la connexion

rem pour adaptation

Dans le passé, nous avions l'habitude de faire cette page : définissez la largeur de la fenêtre d'affichage sur la largeur de l'appareil, puis sélectionnez la largeur minimale de l'appareil avec lequel nous devons être compatibles (généralement 320 px). Créez des pages basées sur cette largeur minimale. Les unités utilisent px et pourcentage. Sur les appareils de largeurs différentes, la taille de la police et la taille du contenu de la page sont les mêmes. La différence est que l'écart entre le contenu du grand écran est plus grand que celui du petit écran. L’inconvénient est donc que la page ne s’affiche pas bien sur les appareils de certaines tailles.

Si vous utilisez rem pour créer la page, nous définirons différentes tailles de police sur l'élément racine en fonction des différentes largeurs de périphérique. Plus la largeur est large, plus la taille de la police est grande. Utilisez ensuite rem pour remplacer le px d'origine. De cette façon, la taille de la police, la taille du contenu et la paire s'agrandissent à mesure que la largeur de l'écran augmente.

Premier js définit la taille de police par défaut du HTML (écrit dans l'en-tête HTML)

<script type="text/javascript">
    var bodyElement = document.documentElement || document.body,
        RC = {
            w: 750,
            h: 1206
        }, //默认设计稿宽高
        GC = {
            w: document.documentElement.clientWidth || window.innerWidth || screen.width,
            h: document.documentElement.clientHeight || window.innerHeight || screen.height
        };
    function setFontSize(){
        var rightSize = parseFloat((RC.w / RC.h).toFixed(1)),
            currentSize = parseFloat((GC.w / GC.h).toFixed(1)),
            lastHTMLSize = 16, // 默认16是因为html默认字号是16px
            html = document.getElementsByTagName("html")[0];
        
            if(rightSize > currentSize){  // 长屏
                lastHTMLSize = 16;
            }else if(rightSize < currentSize){  //宽屏
                lastHTMLSize = (RC.h / GC.h * GC.w) / RC.w * 16;
            }
            html.style.fontSize = GC.w / lastHTMLSize + &#39;px&#39;;
        
    }
 
    setFontSize();
</script>

Copier après la connexion

Définir le fichier scss px conversion rem

// 默认16是html默认字号
// 默认750是设计稿默认宽度
// $n是量取设计稿的距离
 
@charset "UTF-8";
@function rem($n) {
    @return $n / (750 / 16)+rem;
}

Copier après la connexion

Modifiez les fonctions faciles à appeler :

@function getTop($n) {
    @return ($n - 1206 / 2) / (750 / 16)+rem;
}
 
@function getLeft($n) {
    @return ($n - 750 / 2) / (750 / 16)+rem;
}
 
@function getRight($n) {
    @return (($n - 750) / 2) / (750 / 16)+rem;
}
 
@mixin center($left, $top) { //左右居中 上变
    position: absolute;
    left: 50%;
    top: rem($top);
    margin: 0 0 0 getLeft($left);
}
 
@mixin centerlt($left, $top) { //上下，左右居中
    position: absolute;
    left: 50%;
    top: 50%;
    margin: getTop($top) 0 0 getLeft($left);
}
@mixin centerrt($right, $top) { //上下，左右居中
    position: absolute;
    right: 50%;
    top: 50%;
    margin: getTop($top) getRight($right) 0 0;
}
@mixin middlert($right, $top) { //上下居中 右变
    position: absolute;
    right: rem($right);
    top: 50%;
    margin: getTop($top) 0 0 0;
}
 
@mixin centerb($left, $bottom) { //左右居中 下变
    position: absolute;
    left: 50%;
    bottom: rem($bottom);
    margin: 0 0 0 getLeft($left);
}
 
@mixin leftTop($left, $top) { //左变 上变
    position: absolute;
    left: rem($left);
    top: rem($top);
}
@mixin rightTop($right, $top) { //右变 上变
    position: absolute;
    right: rem($right);
    top: rem($top);
}
@mixin leftBottom($left, $bottom) { //右变 上变
    position: absolute;
    left: rem($left);
    bottom: rem($bottom);
}

Copier après la connexion

Appelez la fonction ci-dessus (les distances de largeur et de hauteur peuvent être mesurées en ps pour mesurer la distance réelle. La largeur de brouillon de conception par défaut est de 750) :

page1-img1{
    width: rem(473);
    height: rem(173);
    @include centerlt(139, 767);
}

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes. sur le site PHP chinois !

Lecture connexe :

Comment créer un effet d'animation de cercle en HTML5

Comment utiliser le WebGL de H5 dans le même L'interface crée des graphiques json et echarts

Comment utiliser les nouvelles fonctionnalités de balises sémantiques de H5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!