4가지 모바일 단말기 적응 방법

1.@media 화면은 웹 페이지 레이아웃의 적응성을 실현합니다

장점: 플러그인이 필요하지 않으며 다양한 창 크기에 적응할 수 있습니다. CSS에 @media 화면 속성을 추가하기만 하면 됩니다.

공식 문서: @media는 다양한 화면 크기에 맞게 다양한 스타일을 설정할 수 있습니다. 특히 반응형 페이지를 설정해야 하는 경우 @media는 매우 유용합니다.

Syntax: @media mediatype and|not|only (media feature) { CSS-Code }

/* 屏幕宽度大于 1200px 则 h5 的字体颜色是black */
h5{
    color: black;
  }
@media screen and (max-width: 1200px){
  h5{
    color: #eee;
  }
}
/* h5字体颜色为红色，屏幕宽度只有在869px 与900px之间生效 */
@media screen and (min-width: 869px) and (max-width: 900px){
  h5{
    color: red;
  }
}
/* 屏幕宽度小于 320px 则 h5 的字体大小是20px */
@media only screen and (max-width: 320px){
  h5{
    font-size: 20px;
  }
}

그러다가 모바일 단말 적응에 접속하기 시작했습니다.

2.rem 적응

이 방법은 CSDN 블로거 "sxs1995"의 원본 기사, blog.csdn.net/sxs1995/art...

계산 단위는 640px = 6.40rem,

디자인용입니다. drafts 너비가 750px이면 i = 750이고 디자인 초안의 너비가 640px이면 i = 640입니다.

단점: 페이지가 처음 로드되면 줄이 1~2초간 깜박이고, 휴대폰에서 미리보기하는 사용자 경험이 좋지 않습니다

!function(n){
  var  e=n.document,
  t=e.documentElement,
  i=720,
  d=i/100,
  o="orientationchange"in n?"orientationchange":"resize",
  a=function(){
    var n=t.clientWidth||320;n>720&&(n=720);
    t.style.fontSize=n/d+"px"
 };
  e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

3 @media를 사용하여 구현합니다. rem 적응

장점: 화면 너비가 변경되면 Html 요소의 글꼴 크기를 수정하여 적응시키세요

/* 不同屏幕宽度，设置不同的font-size */
@media screen and (width:750px){html{font-size:100px}}
@media screen and (width:749px){html{font-size:99.87px}}
@media screen and (width:748px){html{font-size:99.73px}}
...
@media screen and (width:321px){html{font-size:42.8px}}
@media screen and (width:320px){html{font-size:42.67px}}

4 vw를 사용하여 rem 적응형 레이아웃을 사용자 정의하세요

저자 JowayYoung의 글을 봤습니다. Nuggets에서 CSS 개발 기술을 유연하게 사용하는 것 중 하나는 vw를 사용하여 rem 적응형 레이아웃을 사용자 정의하는 것입니다

장점: 모바일 단말기에서 rem 레이아웃을 사용하려면 JS를 통해 다양한 화면 종횡비의 글꼴 크기를 설정해야 합니다. 단위와 calc()는 JS

/* 基于UI width=750px DPR=2的页面 */
html {
  font-size: calc(100vw / 7.5);
}

의 제어에서 벗어날 수 있습니다. 현재 위의 방법을 모두 사용했습니다. 코드의 양을 고려하여 주로 vw를 사용하여 rem 적응형 레이아웃을 사용자 정의합니다. ? 잘 참고하겠습니다, 감사합니다.

추천 튜토리얼: "CSS 튜토리얼"

위 내용은 4가지 모바일 단말기 적응 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!