집 >웹 프론트엔드 >H5 튜토리얼 >휴대폰에서 적응을 위해 rem+scss를 사용하는 방법

휴대폰에서 적응을 위해 rem+scss를 사용하는 방법

php中世界最好的语言원래의: 2018-01-30 09:38:282993검색

이번에는 휴대폰 적응을 위해 rem+scss를 사용하는 방법과 휴대폰 사용자가 rem+scss 적응을 사용할 때 주의사항이 무엇인지 보여드리겠습니다.

rem 소개

rem(루트 요소의 글꼴 크기)은 루트 요소(예: html 요소)를 기준으로 한 글꼴 크기의 단위를 나타냅니다.

루트 요소의 글꼴 크기가 10px이고 5rem의 크기가 5*10=50px이라고 가정합니다. 예를 들어

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

rem은 적응에 사용됩니다

과거에는 이런 일을 자주 했습니다. 페이지: 뷰포트 너비가 device-width 로 설정된 다음 장치와 호환되는 데 필요한 최소 너비(보통 320px)를 선택합니다. 이 최소 너비를 기준으로 페이지를 만듭니다. 단위는 px와 퍼센트를 사용합니다. 너비가 다른 기기에서는 페이지의 글꼴 크기와 콘텐츠 크기가 동일합니다. 차이점은 작은 화면에서보다 큰 화면에서 콘텐츠 사이의 간격이 더 크다는 것입니다. 따라서 이것의 단점은 특정 크기의 장치에서는 페이지가 잘 표시되지 않는다는 것입니다.

rem을 사용하여 페이지를 생성하는 경우 다양한 장치 너비에 따라 루트 요소의 글꼴 크기가 다르게 설정됩니다. 너비가 넓을수록 글꼴 크기가 커집니다. 그런 다음 rem을 사용하여 원래 px를 바꾸십시오. 이렇게 하면 화면 너비가 커질수록 글꼴 크기, 콘텐츠 크기, 쌍이 커집니다.

먼저 js는 html의 기본 글꼴 크기를 설정합니다(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>

scss 파일 px를 rem

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

으로 설정합니다. 호출하기 편리한 함수를 편집하세요.

@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);
}

위 함수 호출(PS를 사용하여 너비와 높이 사이의 실제 거리를 측정하세요. 기본 디자인 초안 너비는 750입니다.):

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

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 콘텐츠를 보려면 결제하세요. PHP 중국어 웹사이트의 다른 관련 기사도 주목하세요!