H5 모바일 단말기에서 다양한 목록을 만드는 방법(1)

머리말

모바일 인터넷의 발달로 많은 수가 하지만 PC 쪽 프론트엔드 경험이 모바일에 적용되지 않는 경우가 많습니다. 제가 며칠 전에 쓴 블로그 게시물 "모바일 H5의 몇 가지 기본 지식 요점 정리" 그래서 FungLeo는 다음에는 모바일 단말기에 대한 일련의 튜토리얼을 시작하기로 결정했습니다.

이 기사 시리즈의 CSS 부분은 모두 다음 언어로 작성될 것입니다. SASS 구문을 모르는 경우에는 "CSS 사전 컴파일 기술을 사용한 SASS 학습 경험 요약" 튜토리얼을 포함한 관련 튜토리얼을 읽어보는 것이 좋습니다. 이번 시리즈에서는 브라우저 스타일을 재설정하는 데 사용되는 두 가지 기본 문서인 Reset.scss 및 mixin.scss와 일부 기본 SASS 코드 블록을 참조하겠습니다. 코드가 길기 때문에 "모바일 터미널 시리즈 블로그 기본 사항"을 참조하세요. Reset.scss and mixin.scss》obtain.

레벨이 제한되어 있고 실력도 보통 수준이라 글에 오류나 누락이 있을 수 있으니 다들 댓글 남겨주세요. 최대한 빨리 신고하겠습니다. 모두 감사드립니다.

가장 간단한 목록

먼저, 우리가 이루고자 하는 효과는 다음과 같습니다. 아래:

H5 모바일 단말기에서 다양한 목록을 만드는 방법 (1)

위와 같이 우리가 구현하고자 하는 것은 이렇게 간단한 목록입니다.

html 코드

<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>list 1</title>
<link rel="stylesheet" href="../style/style.css">
</head>
<body>
<p class="list_1">
    <ul>
        <li><a href="">这是一个列表1</a></li>
        <li><a href="">这是一个列表2</a></li>
        <li><a href="">这是一个列表3</a></li>
        <li><a href="">这是一个列表4</a></li>
        <li><a href="">这是一个列表5</a></li>
        <li><a href="">这是一个列表6</a></li>
        <li><a href="">这是一个列表7</a></li>
        <li><a href="">这是一个列表8</a></li>
    </ul></p></body></html>

로그인 후 복사

여기서 설명해야 할 것은 모바일 단말기에

이 코드를 추가해야 한다는 것입니다. 그렇지 않으면 모바일 브라우저는 이를 확장 가능한 PC 버전의 웹 페이지로 취급합니다<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><🎜. >

SASS 코드로 인해 문자가 깨지는 것을 방지하려면 서버, 데이터베이스, 백엔드 프로그램, 프런트엔드 HTML 및 CSS를 모두 utf-8 인코딩으로 통합하는 것이 좋습니다.

.list_1 {    ul {}
    li {
        border-bottom: 1px solid #ddd;padding:0 1.6rem;        
        a {display: block;height: 4rem;line-height: 4rem;overflow: hidden;font-size: 1.4rem;}
    }
}

로그인 후 복사

여기의 모든 단위는

을 사용합니다.
에서는 rem의 글꼴 크기를 reset.scss로 설정했습니다. 이는 일반적인 상황에서는 10px에 해당합니다. 즉, 위의 html은 62.5%과 동일합니다. 왜 이렇게 썼는지에 대해서는 앞서 쓴 글의 설명을 보시려면 이 글의 시작 부분에 있는 링크를 참조하세요. Sass를 모르신다면 어렵다고 생각하지 마시고 먼저 Sass 관련 튜토리얼을 읽어보세요. 확실히 한 시간이면 배울 수 있고 이틀이면 아주 원활하게 플레이할 수 있습니다. >여전히 간단한 목록입니다1.6rem16px우선 렌더링을 살펴보겠습니다.

얼핏 보면 이 목록과 별 차이가 없습니다. 그러나 자세히 살펴보면 아래 라인이 상위 라인이 아니라는 것을 알 수 있습니다.

디자이너들은 디자인할 때 자신만의 디자인 컨셉을 가지고 있는 경우가 많습니다. 이렇게 하면 디자이너의 디자인 중 일부를 충실하게 복원해야 합니다. 다소 불필요하다고 생각하더라도 ㅋㅋㅋ

H5 모바일 단말기에서 다양한 목록을 만드는 방법 (1) html 코드는 처음과 완전히 동일합니다. 예를 들어 여기서 코드는 반복되지 않습니다.

SASS 코드

.list_1 {    ul {padding-left: 1.6rem;}
    li {        border-bottom: 1px solid #ddd;padding-right: 1.6rem;        
    a {display: block;height: 4rem;line-height: 4rem;overflow: hidden;font-size: 1.4rem;}
    }
}

로그인 후 복사

사실 약간의 변환일 뿐입니다. 여기서는 데모1에 로드된 li의 패딩 값을 ul에 할당하면 됩니다.

요약