CSS의 rem과 모바일 단말의 레이아웃 방법에 대한 심층적인 이해
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7570
15
1386
52
87
11
62
19
28
108
Vue 프로젝트에서 모바일 제스처 작업을 사용하는 방법
Oct 08, 2023 pm 07:33 PM
Vue 프로젝트에서 모바일 제스처 작업을 사용하는 방법 모바일 장치의 인기로 인해 점점 더 많은 애플리케이션이 모바일 터미널에서 보다 친숙한 대화형 경험을 제공해야 합니다. 제스처 조작은 모바일 장치의 일반적인 상호 작용 방법 중 하나로, 사용자가 화면을 터치하여 슬라이딩, 확대/축소 등 다양한 작업을 완료할 수 있습니다. Vue 프로젝트에서는 타사 라이브러리를 통해 모바일 제스처 작업을 구현할 수 있습니다. 다음은 Vue 프로젝트에서 제스처 작업을 사용하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저, 특별 상품을 소개해야 합니다.
Vue 모바일 단말기의 멀티 터치 포인트 문제 해결
Jun 30, 2023 pm 01:06 PM
모바일 개발에서는 여러 손가락 터치 문제에 자주 직면합니다. 사용자가 여러 손가락을 사용하여 모바일 장치에서 화면을 스와이프하거나 확대/축소할 때 이러한 제스처를 정확하게 인식하고 응답하는 방법은 중요한 개발 과제입니다. Vue 개발에서는 모바일 단말기의 여러 손가락 터치 문제를 해결하기 위해 몇 가지 조치를 취할 수 있습니다. 1. vue-touch 플러그인 사용 vue-touch는 Vue용 제스처 플러그인으로, 모바일 측에서 다중 손가락 터치 이벤트를 쉽게 처리할 수 있습니다. npm을 통해 vue-to를 설치할 수 있습니다
REM(전체 이름 REMME)이란 무엇입니까?
Feb 21, 2024 pm 05:00 PM
REMME는 어떤 코인인가요? REMME는 매우 안전하고 분산된 네트워크 보안 및 신원 확인 솔루션을 제공하는 데 전념하는 블록체인 기술을 기반으로 하는 암호화폐입니다. 이 프로젝트는 분산 암호화 기술을 사용하여 사용자 인증 프로세스를 강화하고 단순화하여 보안과 효율성을 향상시키는 것을 목표로 합니다. REMME의 혁신은 블록체인의 불변성과 투명성을 활용하여 사용자에게 보다 신뢰할 수 있는 신원 확인 방법을 제공한다는 것입니다. REMME는 인증 정보를 블록체인에 저장함으로써 중앙 집중식 인증 시스템의 단일 실패 지점을 제거하고 데이터 도난 또는 변조 위험을 줄입니다. 이러한 블록체인 기반 인증 방식은 더욱 안전하고 신뢰할 수 있을 뿐만 아니라 현재 디지털 시대의 네트워크인 REMME에 대한 배경 지식도 제공합니다.
CSS 레이아웃 단위의 진화와 적용: 픽셀에서 루트 요소의 글꼴 크기를 기반으로 하는 상대 단위로
Jan 05, 2024 pm 05:41 PM
px에서 rem까지: CSS 레이아웃 단위의 진화와 적용 소개: 프런트엔드 개발에서는 페이지 레이아웃을 구현하기 위해 CSS를 사용해야 하는 경우가 많습니다. 지난 몇 년 동안 CSS 레이아웃 단위는 진화하고 발전했습니다. 처음에는 요소의 크기와 위치를 설정하는 단위로 픽셀(px)을 사용했습니다. 그러나 반응형 디자인의 등장과 모바일 기기의 대중화로 인해 픽셀 단위는 점차 문제를 드러내고 있습니다. 이러한 문제를 해결하기 위해 새로운 단위 rem이 등장했고 점차 CSS 레이아웃에 널리 사용되었습니다. 하나
Vue 개발에서 모바일 단말기의 더블클릭 증폭 문제를 해결하는 방법
Jun 29, 2023 am 11:06 AM
모바일 장치의 인기로 인해 모바일 개발에 Vue를 사용하는 것이 일반적인 선택이 되었습니다. 그런데 모바일 개발을 하다보면 더블클릭으로 확대되는 문제에 자주 직면하게 됩니다. 이 기사에서는 이 문제에 초점을 맞추고 Vue 개발에서 모바일 단말기의 더블 클릭 증폭의 구체적인 방법을 해결하는 방법에 대해 논의할 것입니다. 모바일 기기에서 더블클릭 증폭 문제는 주로 모바일 기기에서 터치스크린을 더블클릭하면 웹페이지의 줌 비율이 자동으로 확대되기 때문에 발생합니다. 일반적인 웹 개발의 경우 이런 종류의 두 번 클릭으로 확대하는 것이 일반적으로 유익합니다.
Vue(Vant)에서 모바일 반응형 레이아웃 구현에 대한 전체 가이드
Jun 09, 2023 pm 04:09 PM
Vue(Vant)에서 모바일 반응형 레이아웃 구현을 위한 전체 가이드 모바일 반응형 레이아웃은 현대 웹 개발에서 매우 중요한 부분입니다. 모바일 장치가 인기를 끌면서 사용자의 휴대폰 화면 크기와 해상도에 어떻게 빠르게 반응하는지가 중요해졌습니다. a 프론트엔드 엔지니어가 직면해야 하는 과제 중 하나입니다. Vue 프레임워크에는 반응형 레이아웃 기능이 포함되어 있으며, 반응형 레이아웃을 구현하는 데 도움이 되는 타사 라이브러리도 많이 있습니다. 그중 Vant 컴포넌트 라이브러리는 Vue 모바일 UI 라이브러리입니다. 그 이유는 매우 강력하고, 사용하기 쉽고, 사용자 정의가 쉽고, 모바일 장치와 완벽하게 호환되기 때문입니다.
Python과 Baidu Map API를 사용하여 모바일 지도 위치 확인 기능을 구현하는 방법
Jul 29, 2023 pm 11:33 PM
Python 및 Baidu Map API를 사용하여 모바일 지도 위치 확인 기능을 구현하는 방법 모바일 인터넷이 발전함에 따라 모바일 애플리케이션에서 지도 위치 확인 기능이 점점 더 보편화되었습니다. 널리 사용되는 프로그래밍 언어인 Python은 Baidu Map API를 사용하여 모바일 지도 위치 지정 기능을 구현할 수도 있습니다. 다음은 Python 및 Baidu Map API를 사용하여 지도 위치 지정 기능을 구현하는 단계를 소개하고 해당 코드 예제를 제공합니다. 1단계: Baidu 지도 API 키 신청 시작하기 전에 먼저 신청해야 합니다.
PHP 양식에서 모바일 및 반응형 디자인을 처리하는 방법
Aug 10, 2023 am 11:51 AM
PHP 양식에서 모바일 및 반응형 디자인을 처리하는 방법 모바일 장치의 인기와 빈도가 증가하고 모바일 장치를 사용하여 웹 사이트에 액세스하는 사용자가 점점 더 많아짐에 따라 모바일에 적응하는 것이 중요한 문제가 되었습니다. PHP 양식을 다룰 때 모바일 친화적인 인터페이스와 반응형 디자인을 달성하는 방법을 고려해야 합니다. 이 문서에서는 PHP 양식에서 모바일 및 반응형 디자인을 처리하는 방법을 설명하고 코드 예제를 제공합니다. 1. HTML5를 이용한 반응형 폼 HTML5는 반응형 폼을 쉽게 구현할 수 있는 몇 가지 새로운 기능을 제공합니다.
