모바일 H5 - 강의 1 CSS

 

1.移动端开发视窗口的添加

 

h5端开发下面这段话是必须配置的

 

meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

 

其它相关配置内容如下：

 

width viewport 宽度(数值/device-width)

height viewport 高度(数值/device-height)

initial-scale 初始缩放比例

maximum-scale 最大缩放比例

minimum-scale 最小缩放比例

user-scalable 是否允许用户缩放(yes/no)

minimal-ui iOS 7.1 beta 2 中新增属性（注意：iOS8 中已经删除），可以在页面加载时最小化上下状态栏。

 

2.媒体查询的改进

 

之前在做移动端开发的时候，为了适配多屏幕。使用的是rem 单位。这个时候就需要根据屏幕的尺寸来来动态的设置根节点html 的font-size 值。这样可以解决多屏幕适配的问题。

 

比如下面的 媒体查询代码

 

html {

    //iphone5

    font-size: 62.5%;

}

@media (max-width: 414px) {

    html {

        //iphone6+

        font-size: 80.85%;

    }

}

@media (max-width: 375px) {

    html {

        //iphone6

        font-size: 73.24%;

    }

}

 

这样做的结果，有两个很明显的缺点。

 

适配屏幕的尺寸不是连续的。

在自己的 css 文件中添加大段的这样查询代码。增加了 css 文件的体积。

 

后来参考淘宝移动端页面适配规则，使用 js 获取客户端的宽度，根据设计稿的原型动态的计算font-size 的值。

 

详细的内容请看这里 根据iPhone6设计稿动态计算rem值

 

3.a标签内容语义化

 

大多数时候我们都会给一片区域加上点击跳转的功能。如下图：

 

 

 

很可能我们商品区域都是使用的div 标签。很容易我们会给最外层加上一个 a 标签。因为a 是行内元素，是没有宽和高的。不能够把容器撑开。

 

一种解决办法就是给a 标签设置block 属性。如下：

 

 

   

기능상 문제는 없습니다. 그러나 의미론적 수준에서 위 코드는 비표준입니다.

가장 좋은 방법은 HTML 코드가 너무 눈에 띄지 않도록 다음과 같이 수정하는 것입니다.

<스타일>

{디스플레이:블록;}

범위{디스플레이:블록;}

4. 페이지의 최대 너비와 최소 너비를 설정하세요

rem 단위를 사용하고 js를 사용하여 글꼴 크기 값을 동적으로 계산하면 가장 크고 작은 터미널 화면에 무한히 적응할 수 있습니다. 하지만 사용자의 화면이 일정 크기를 넘어서 계속해서 h5 페이지를 표시한다면 사용자에게 매우 불친절할 것입니다.

JD.com과 Taobao의 h5페이지를 살펴보겠습니다

페이지의 최대 너비와 최소 너비가 정의되어 있음을 확인했습니다. 이를 통해 화면이 특정 크기를 초과할 때 더 친숙한 표시가 가능합니다(물론 그럴 필요는 없습니다).

내 제품 페이지에 대해 정의한 최대 너비와 최소 너비는 다음과 같습니다.

{

최대 너비:640px;

최소 너비:320px;

}

5. 모바일 브라우저의 기본 입력 스타일인 a를 제거합니다

1. 태그 배경 금지

모바일 단말기에서 a태그를 버튼으로 사용할 경우, 클릭 시 "어두운" 배경이 나타납니다. 배경을 제거하는 방법은 다음과 같습니다

a,button,input,optgroup,select,textarea {

-webkit-tap-highlight-color:rgba(0,0,0,0) /*입력 및 버튼을 클릭하면 파란색 외부 테두리와 회색 반투명 ​​배경 제거*/

}

2. a를 길게 누르는 것이 금지되며, img 태그를 길게 누르면 메뉴바가 나타납니다

a 태그 사용 시 모바일 단말기를 길게 누르면 메뉴바가 표시되는데, 이때 메뉴바 불러오기를 비활성화하는 방법은 다음과 같습니다.

아, img {

-webkit-touch-callout: none /*링크 및 이미지 팝업 메뉴 길게 누르기 비활성화*/

}

3. 부드러운 스크롤

본체{

-webkit-overflow-scrolling:touch;

}

6.CSS 문자열 자르기

문자열을 한 줄로 자릅니다. 여기서 문자열 너비를 지정해야 합니다

{

/*문자열 너비 지정*/

너비:300px

오버플로: 숨김

/* 문자열이 지정된 길이를 초과하면 줄임표 문자가 표시됩니다*/

텍스트 오버플로:줄임표

공백: nowrap

}

7.calc 관련 질문

레이아웃 작업 시 calc를 사용할 때 심각한 온라인 버그가 발생했습니다. 나중에 이 속성의 사용법을 자세히 살펴보았습니다.

calc의 유용한 점은 모든 단위 간에 변환이 가능하다는 것입니다. 그러나 브라우저 지원은 그리 좋지 않습니다. 스크린샷을 사용할 수 있는지 살펴보세요.

호환성을 확보하려면 사용 시 제조업체 접두사를 추가하세요. 그러나 브라우저 지원이 제한되어 있으므로 지금은 사용하지 않는 것이 좋습니다.

샘플 코드:

#formbox {

너비: 130px;

/*제조업체 접두어 추가, 연산자(+, -, *, /) 양쪽에 공백이 있어야 함)*/                                    

너비: -moz-calc(100% / 6)

너비: -webkit-calc(100% / 6)

너비: 계산(100% / 6)

테두리: 1px 단색 검정색;

패딩: 4px;

}

Taobao, Tmall, JD.com의 h5 페이지를 조사한 결과 이 ​​장치는 주로 호환성 문제로 인해 많이 사용되지 않는 것으로 나타났습니다.

8.박스사이즈 활용

다른 브라우저에서 박스 모델의 일관성 없는 성능 문제를 해결합니다. 하지만 여전히 호환성 문제가 있을 것입니다. 아래 브라우저 지원 목록을 참조하세요.

box-sizing 속성은 기본 CSS 상자 모델이 요소의 높이와 너비를 계산하는 방식을 변경하는 데 사용됩니다. 이 속성은 표준 상자 모델을 제대로 지원하지 않는 브라우저의 동작을 시뮬레이션하는 데 사용됩니다.

다음 세 가지 속성 값이 있습니다.

콘텐츠 상자 기본값, 표준 상자 모델. width 및 height에는 콘텐츠의 너비와 높이만 포함되며 테두리, 안쪽 여백 및 여백은 포함되지 않습니다. 참고: 패딩, 테두리 및 여백은 모두 이 상자 외부에 있습니다. 예를 들어 .box {width: 350px}; 및 {border: 10px solid black;}인 경우 브라우저에서 렌더링되는 실제 너비는 370px입니다.

패딩 상자 너비와 높이에는 패딩이 포함되지만 테두리와 여백은 포함되지 않습니다.

border-box width 与 height 包括内边距与边框，不包括外边距。这是IE 怪异模式（Quirks mode）使用的 盒模型 。注意：这个时候外边距和边框将会包括在盒子中。比如 .box {width: 350px; border: 10px solid black;} 浏览器渲染出的宽度将是350px.

 

浏览器支持：

 

 

 

9.水平垂直居中的问题

 

可以看之前写定位的一篇文章，末尾有讲到各种定位：【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位)

 

这里实现一个相对定位和绝对定位配合实现水平垂直居中的样式。看效果：

 

 

 

html 代码如下：

 

       

 

CSS 코드는 다음과 같습니다.

.parent-div{

너비: 100px;

높이: 100px;

배경색:빨간색;

위치:상대적;

}

.child-div{

너비:50px;

높이:50px;

배경색:#000;

위치: 절대;

여백:자동;

상단:0;

왼쪽:0;

오른쪽:0;

하단:0;

}

절대 위치 지정은 매우 정사각형 방식으로 레이아웃의 많은 문제를 해결할 수 있지만 대부분의 경우 절대 위치 지정을 사용하지 않고 플로팅 및 기타 방법을 사용합니다. 절대 위치 지정은 DOM 요소를 현재 문서 흐름에서 분리해야 하는 경우에만 사용됩니다. 예: 탄성 층, 정지 층 등

10. CSS의 줄 높이 문제

line-height의 매우 중요한 용도는 텍스트가 상위 요소의 수직 중앙에 위치하도록 허용하는 것이지만, 이를 사용할 때 몇 가지 문제에 직면할 수도 있습니다.

먼저 아래 예시를 살펴보겠습니다.

코드도 매우 간단합니다. 즉, div에서 정의한 글꼴이 크면 글꼴과 상위 요소 사이에 약간의 간격이 보입니다. 그렇다면 왜 이런가요?

line-height의 정의를 다음과 같이 확인해 보겠습니다.

정상 기본값입니다. 적당한 줄 간격을 설정하세요.

number는 줄 간격을 설정하기 위해 현재 글꼴 크기에 곱할 숫자를 설정합니다.

length는 고정된 줄 간격을 설정합니다.

% 현재 글꼴 크기를 기준으로 한 줄 간격 비율입니다.

inherit는 line-height 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

위 상황에서 글꼴이 컨테이너를 채우려면 100% 값으로 상위 컨테이너에 line-height 속성을 추가해야 합니다.

코드와 효과는 다음과 같습니다.

그럼 위와 같은 문제는 왜 발생하는 걸까요?

계산된 줄 높이와 글꼴 크기(줄 간격) 값의 차이를 두 부분으로 나누어 각각 텍스트 줄 내용의 위쪽과 아래쪽에 추가합니다.

따라서 다음 공식이 도출됩니다.

공백 = 줄 높이 – 글꼴 크기

그래서 line-height 값을 100%로 설정하면 line-height 값은 글꼴 크기 크기와 같고 이때 공백은 0이 됩니다.

11. 수직 정렬을 사용하여 아이콘을 수직 중앙으로 조정합니다

아이콘과 텍스트를 함께 사용해야 하는 경우가 많으며, 아이콘과 텍스트는 모두 세로 중앙에 배치되어야 합니다. 아래와 같이:

텍스트를 세로로 가운데 정렬하려면 line-height=부모 컨테이너 높이를 사용하면 쉽습니다. 하지만 아이콘을 수직으로 중앙에 배치하는 것이 더 번거롭습니다.

일반적인 상황에서는 아래와 같이 텍스트나 인접한 컨테이너가 텍스트와 동일한 맨 아래 줄에 유지되어야 합니다.

귀환 아이콘이 수직 중앙에 있지 않다는 것을 알 수 있습니다. 그렇다면 아이콘을 어떻게 수직으로 중앙에 배치해야 할까요?

우선 여러 줄의 관계를 알아봅시다. (사진은 인터넷에서 가져온 것입니다. 침해사항이 있으면 알려주세요.)

이런 방식으로 수직 정렬 속성을 사용해야 합니다.

인라인 요소 또는 테이블 셀 요소의 수직 정렬을 지정합니다

기준선: valign 속성을 지원하는 개체의 콘텐츠를 상위 요소 기준선에 정렬합니다.

sub: 요소 기준선은 상위 요소의 아래 첨자 기준선에 맞춰 정렬됩니다.

super: 요소 기준선은 상위 요소의 위 첨자 기준선에 맞춰 정렬됩니다.

top: 요소의 상단과 해당 하위 요소가 전체 행의 상단에 맞춰 정렬됩니다.

text-top: 요소의 상단이 상위 요소의 글꼴 상단에 맞춰 정렬됩니다.

중간: 요소의 중간선이 상위 요소의 기준선에 맞춰 정렬됩니다.

하단: 요소의 하단과 해당 하위 요소가 전체 행의 하단에 맞춰 정렬됩니다.

text-bottom: 요소의 하단이 상위 요소의 글꼴 하단에 맞춰 정렬됩니다.

백분율: 기준선으로부터의 오프셋을 백분율로 지정합니다. 부정적일 수 있습니다. 백분율의 기준은 0%입니다.

길이: 길이 값을 사용하여 기준선으로부터의 오프셋을 지정합니다. 부정적일 수 있습니다. 숫자 값의 기준선은 0입니다. (CSS2)

아래 HTML을 보세요:

       

       

        我就是标题

초기 결과는 이렇습니다

우리는 오른쪽 글꼴을 기준으로 아이콘을 중앙에 배치하여 아래와 같은 결과를 얻고 싶습니다.

이제 수직 정렬 속성을 사용하고 길이 속성을 설정해야 합니다. 즉, 텍스트 기준선을 기준으로 아이콘의 오프셋을 설정해야 합니다.

속성을 추가할 때 아이콘과 텍스트를 모두 수직으로 중앙에 배치하는 것은 쉽습니다.

{

수직 정렬:15px;

}

이때 아이콘과 글꼴은 상위 요소를 기준으로 중앙에 배치됩니다.

12. 플렉스박스 모델 활용

현재 PC측에서는 flex가 잘 지원되지 않습니다(주로 IE8, 9 사용자가 여전히 많기 때문입니다.). 대부분의 경우 모바일측에서는 flex 레이아웃을 사용합니다. 하지만 그럼에도 불구하고 사기성 버그가 많이 있을 것입니다.

Flex를 언제 사용해야 하는지 기본적인 사용 경험에 대해 이야기해 보겠습니다.

1. flex 속성을 사용하는 경우

먼저 아래 제품 모델을 살펴보겠습니다

왼쪽 항목과 오른쪽 항목의 너비가 동일합니다. 이 모델을 보고 가장 먼저 생각한 것은 flex를 사용하여 2열로 구성된 제품 목록을 화면 영역을 균등하게 나누는 것이었습니다. 이번에는 flex를 사용하여 수행됩니다.

상위 요소는 다음과 같이 정의됩니다

{

여백-하단: .5rem;

디스플레이: 상자;

디스플레이: -webkit-box;

표시: -ms-flexbox;

디스플레이: 플렉스;

디스플레이: -webkit-flex;

-webkit-flex-flow: 행;

-ms-flex-flow: 행;

플렉스 흐름: 행;

}

2.제조업체 접두사 추가

Flex를 사용할 때는 제조업체 접두사를 추가하는 것을 잊지 마세요(현재 작성하는 방법에는 1, 기존 2, 초과 3, 신규의 세 가지가 있습니다). 그렇지 않으면 분명히 호환성 문제가 있을 것입니다.

{

디스플레이: -webkit-box;

표시: -ms-flexbox;

디스플레이: 플렉스;

디스플레이: -webkit-flex;

}

3. 하위 플렉스 브라우저와의 호환성

먼저 내 코드를 살펴보세요.

{

box-flex: 1;

-webkit-box-flex: 1;

-webkit-flex: 1;

-ms-flex: 1;

플렉스: 1;

너비: 18.5rem;

}

여기에서는 왼쪽과 오른쪽이 화면 너비를 균등하게 나누도록 하겠습니다.

Android 4.3 휴대폰에서 flex를 사용할 때 문제가 발생했습니다. 일반 페이지는 아래 그림과 같습니다.

그런데 안드로이드 4.3 폰에서는 결과는 이렇습니다

나중에 Tmall 페이지를 연구했는데(전에 Tmall을 참조하여 이 flex를 배웠기 때문에) flex 값을 정의할 때 width=0과 같은 속성을 갖게 된다는 것을 확인했습니다.

그리고 이 속성을 페이지에 추가하자 페이지 레이아웃이 정상적으로 되었습니다. 지금은 의지가 무엇인지 알 수 없으며 단지 해킹으로 사용할 수 있습니다. 이 문제가 발생하면 이 속성을 추가해 보세요. 왜 이런 식으로 사용되는지 아는 사람이 있으면 알려주십시오.

13. CSS3 애니메이션 성능 문제

우리가 일반적으로 요소 스타일을 변경하는 데 사용하는 CSS 속성이 CPU 또는 GPU에 의해 트리거되는지 감지할 수 있는 웹사이트(여기 클릭)를 추천합니다. 특히 애니메이션을 할 때 GPU를 사용하여 그래픽을 렌더링하는 경우 CPU 소비를 줄이고 프로그램 성능을 향상시킬 수 있습니다.

예를 들어 이미지 위치를 전환하는 슬라이더 애니메이션을 만들 때 웹사이트를 통해 속성 값을 쿼리하면 다음과 같은 결과를 얻습니다.

위에서 볼 수 있듯이 margin-left를 사용하면 페이지 다시 그리기 및 리플로우가 발생하지 않습니다.

그러나 요소의 위치를 ​​변경하기 위해 전통적인 margin-left 대신 새로운 CSS3 속성 변환을 사용하면 페이지에 어떤 영향을 미칠까요? 먼저 웹사이트 쿼리 결과를 살펴보겠습니다.

쿼리 결과를 통해 변환을 사용해도 다시 그리기가 실행되지 않는다는 것을 알 수 있습니다. 그리고 페이지 레이아웃을 돕기 위해 GPU를 트리거합니다. 즉, GPU 작업을 사용하여 애니메이션을 렌더링하고 CPU 소비를 줄이고 성능을 향상시킵니다.

CSS 애니메이션의 간단한 예로서 CSS 코드는 다음과 같습니다.

.lottery-animation {

-webkit-animation: lottery-red 2s;

애니메이션: lottery-red 2s;

-webkit-animation-iteration-count: 무한;

애니메이션 반복 횟수: 무한;

}

@-webkit-keyframes lottery-red {

({

에서)

-webkit-transform: 회전Y(0deg);

변환: 회전Y(0deg);

}

에서 {

으로

-webkit-transform: 회전Y(360deg);

변환: 회전Y(360deg);

}

}

@keyframes lottery-red {

({

에서)

-webkit-transform: 회전Y(0deg);

변환: 회전Y(0deg);

}

에서 {

으로

-webkit-transform: 회전Y(360deg);

변환: 회전Y(360deg);

}

}

효과는 다음과 같습니다.

여기서는 이미지 태그에 class="lottery-animation"을 추가했습니다

동적인 사진을 캡처하는 소프트웨어에 문제가 있습니다. GIF 스크린샷의 애니메이션이 약간 멈췄으며 매끄럽지 않습니다. 일반 컴퓨터에서는 문제가 없습니다(Mac용 유용한 gif 스크린샷 소프트웨어가 있으면 저에게 추천해 주세요. 감사합니다!).