머리말
우리 프로그래머는 일상 업무에서 반응형 레이아웃을 사용해야 하는 일부 프로젝트에 직면할 수 있습니다.
반응형 레이아웃은 다른 단말기 사용자에게 보다 편안한 인터페이스와 더 나은 사용자 경험을 제공할 수 있으며 대형 화면 모바일 장치의 인기로 인해 반복적인 개발을 피하기 위해 반응형 레이아웃이 특히 중요합니다.
여기서 내가 사용한 솔루션을 공유하겠습니다. 틀린 부분 있으면 조언 부탁드립니다!
목차
1. 언론 문의
즉, 크기가 다른 장치에 대해 서로 다른 CSS 스타일을 설정합니다. 코드로 바로 가보겠습니다.
// 屏幕大于240px时的样式
@media (min-width: 240px) {
}
@media (min-width: 320px) {
}
@media (min-width: 360px) {
}
@media (min-width: 375px) {
}
@media (min-width: 384px) {
}
@media (min-width: 411px) {
}
@media (min-width: 414px) {
}
@media (min-width: 424px) {
}
@media (min-width: 480px) {
}
@media (min-width: 540px) {
}
@media (min-width: 640px) {
}
@media (min-width: 720px) {
}
@media (min-width: 750px) {
}
@media (min-width: 768px) {
}
@media (min-width: 800px) {
}
@media (min-width: 980px) {
}
@media (min-width: 1024px) {
}
@media (min-width: 1080px) {
}
@media (min-width: 1152px) {
}
@media (min-width: 1366px) {
}
@media (min-width: 1440px) {
}
@media (min-width: 2160px) {
}여기에서 크기의 너비에 해당하는 {}에 CSS 스타일을 작성할 수 있습니다.
둘, 렘 레이아웃 사용
먼저 HTML 페이지 의 head 태그에 메타 태그를 작성합니다 . 코드는 다음과 같습니다.
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no,"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta name="viewport" content="user-scalable=0,width=device-width, initial-scale=1.0">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no,">
<title>test</title>
</head>
<body>
<noscript>
<strong></strong>
</noscript>
<div id="app"></div>
</body>
</html>그런 다음 css 파일을 만들고 동시에 다음 코드를 작성합니다.
@media (min-width: 240px) {
html {
font-size: 32px;
}
}
@media (min-width: 320px) {
html {
font-size: 42.66667px;
}
}
@media (min-width: 360px) {
html {
font-size: 48px;
}
}
@media (min-width: 375px) {
html {
font-size: 50px;
}
}
@media (min-width: 384px) {
html {
font-size: 51.2px;
}
}
@media (min-width: 411px) {
html {
font-size: 54.8px;
}
}
@media (min-width: 414px) {
html {
font-size: 55.2px;
}
}
@media (min-width: 424px) {
html {
font-size: 56.53333px;
}
}
@media (min-width: 480px) {
html {
font-size: 64px;
}
}
@media (min-width: 540px) {
html {
font-size: 72px;
}
}
@media (min-width: 640px) {
html {
font-size: 85.33333px;
}
}
@media (min-width: 720px) {
html {
font-size: 96px;
}
}
@media (min-width: 750px) {
html {
font-size: 100px;
}
}
@media (min-width: 768px) {
html {
font-size: 102.4px;
}
}
@media (min-width: 800px) {
html {
font-size: 106.66667px;
}
}
@media (min-width: 980px) {
html {
font-size: 130.66667px;
}
}
@media (min-width: 1024px) {
html {
font-size: 136.53333px;
}
}
@media (min-width: 1080px) {
html {
font-size: 144px;
}
}
@media (min-width: 1152px) {
html {
font-size: 153.6px;
}
}
@media (min-width: 1366px) {
html {
font-size: 182.13333px;
}
}
@media (min-width: 1440px) {
html {
font-size: 192px;
}
}
@media (min-width: 2160px) {
html {
font-size: 288px;
}
}그것을 사용할 때 위에서 작성한 css 파일을 HTML 페이지에 도입 해야 합니다 .
HTML 페이지 의 스타일을 작성할 때 px 대신 rem을 사용하는 데 주의를 기울여야 합니다 . 여기에서도 rem 과 px 사이의 변환 에 주의를 기울여야 합니다 .
위에서 정의한 css 에 따라 계산하면 너비 가 375px 일 때 rem 으로 환산하면 7.5rem이 되어야 합니다 .
###### 더이상~~~