CSS의 rem과 모바일 단말의 레이아웃 방법에 대한 심층적인 이해
- yulia원래의
- 2018-09-17 16:15:081520검색
px는 이미 다들 잘 아실 거라 생각하는데, rem에 관해서는 모르는 분들도 계세요. 오늘 글에서는 주로 rem과 em이 무엇인지, 모바일 단말기에서의 레이아웃 방법에 대해 소개하겠습니다. 필요하시면 참고하시면 좋겠습니다.
1. 렘이란?
rem은 CSS3에 새로 추가된 단위 속성(루트 요소의 글꼴 크기)으로, 페이지의 루트 노드의 글꼴 크기에 따라 변환되는 단위입니다. 뿌리! ! ! ! ! ! ! ! ! html인 루트 노드입니다.
예: (아래 예의 루트 노드는 html이고 글꼴 크기는 100px이므로 루트 노드 아래 요소에 대해 설정된 rem은 1rem=100px입니다.)
rem의 초기 값은 16px, 즉 즉, 루트 노드의 글꼴 크기가 설정되지 않은 경우 1rem=16px
<html>
<head>
<style>
html,body{ font-size: 100px; }
header{ height: 1rem;width: 1rem; }
</style>
</head>
<body></body>
<header></header>
</html>2. em
em이란 무엇입니까? em 단위도 글꼴에 따라 변환되는 단위입니다. 상위 요소의 크기.
1. em의 값은 고정되어 있지 않습니다.
2. em은 상위 요소의 글꼴 크기를 상속받습니다.
부모 노드
예:
<header style="font-size:100px;">//父元素的字体大小是100px
<div style="height:1em;width:1em;"></div>//所以子元素的em是1em=100px；
</header>3. 모바일 페이지 개발 기술:
먼저 사용자 사용량을 조사하고 대부분의 사용자가 어떤 장치를 사용하는지 요약합니다.
예: 현재 대부분의 사용자는 세 가지 유형의 휴대폰을 사용합니다. 먼저 인터넷에서 각 휴대폰의 해상도를 알아봅니다.
모두 나열한 후 미디어 쿼리를 작성합니다. (휴대폰마다 해상도가 다르기 때문에 픽셀을 사용하면 디스플레이가 동일합니다. 예를 들어 어린이가 먹는다면 표준 접시는 구내식당의 아이는 찐빵인데, 어떤 아이들은 많이 먹기도 하고, 어떤 아이들은 적게 먹기 때문에 밥을 제대로 먹지 못하거나 낭비가 되는 경우도 있습니다. 그래서 식당 이모님이 아이디어를 냈습니다. 무게가 50~60파운드라면 찐빵 1개, 50파운드 미만의 찐빵 반개, 60파운드가 넘는 찐빵 2개, 이 세 가지 배포 방법을 받을 수 있습니다.)
내 사용자 그룹은 아마도 이 세 가지 유형의 장치일 것입니다.
기기 이름 확인을 위한 예상 글꼴 크기 rem 및 px 변환
iphone5 320568 글꼴 크기: 12px; 1rem=12px
iphone6 375667 글꼴 크기: 1rem=14px
iphone6 플러스 414*736 글꼴 크기 : 16px; 1rem=16px
기본 스타일 쓰기를 위해 먼저 중간 장비를 꺼내세요
초기 쓰기는 디자인 도면에 따라 px 단위로 할 수 있습니다. (즉, 찐빵의 크기를 먼저 선택하세요)
쓰기를 우선으로 하세요 미디어 쿼리
페이지에 미디어 쿼리 태그 작성 우선순위
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
width - 뷰포트 장치의 너비
height - 뷰포트 장치의 높이
initial -scale - 초기 배율 비율
minimum-scale - 사용자가 확대/축소할 수 있는 양 최소 배율
maximum-scale - 사용자가 확대/축소할 수 있는 최대 배율
user-scalable - 사용자가 수동으로 확대/축소할 수 있는지 여부
위에 할당되어 있으므로 미디어 쿼리를 다음과 같이 작성합니다.
html,body{ height: 100%; margin : 0; padding: 0;font-size: 14px;}//초기 스타일을 작성해야 합니다. 상단에! ! ! ! 미디어쿼리 하단에 작성하면 위의 미디어쿼리를 덮게 됩니다(캐스케이딩 스타일시트이니까요~)
@media screen and (max-width:320px ) {
html{font-size: 12px;}
}
@media screen and (min-width:321px) and (max-width:750px ) {
html{font-size: 14px;}
}
@media screen and (min-width:751px ) {
html{font-size: 16px;}
}초기 템플릿 세트는 위에 작성되어 있기 때문에 초기 템플릿은 모두 px이므로, 기사 시작 부분에서 px를 사용할 수 없는 이유를 강조하므로 페이지의 px를 해당 rem 값으로 변환해야 합니다
예:
header{
width:140px;//转化为10rem，因为我们是基于最中间的设备做的，中间设备的font-size：14px，所以140px=10rem。
}px를 사용하는 모든 높이와 너비가 rem으로 변경됩니다. . 세 가지 장치가 일치하는 데 적합합니다.
위 내용은 CSS의 rem과 모바일 단말의 레이아웃 방법에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!