꼭 알아야 할 모바일 HTML5 기본 지식

이 회사에 들어오면서 이전 직장에서 PC 페이지 작업을 하다가 지금은 이 회사에 오게 되었습니다.

PC 페이지 제작에 익숙한 사람으로서 모바일 페이지는 매우 간단해야 하는데, 시작하는 과정에서 모바일 페이지가 되었다는 것을 알게 되었습니다. 아주 간단합니다. DOM 구조는 훨씬 간단하지만 아직 주의해야 할 세부 사항이 많습니다. 그 이유는 매우 간단합니다. 즉, 모든 휴대폰에서 다양한 해상도의 디스플레이 효과를 고려해야 합니다. 모바일 단말기의 해상도는 무엇인가요?

iPhone을 예로 들면 다음과 같은 해상도가 있습니다

iphone4 640*960

아이폰5 640*1136

아이폰6 750*1334
iphone6plus 1242*2208

안드로이드 진영의 해상도는 예전에는 다양했는데 이제는 기본적으로 3가지로 나뉜다

720P 720*1280

1080P 1080*1920

2K 1440*2560

이건 착각입니다. 사실 제가 H5 휴대폰을 만들 당시에는 해상도가 전혀 이렇지 않았는데... 브라우저에서 실제 해상도는

iPhone을 그대로 사용합니다. 예, 다음 해상도

iphone4 320*480

아이폰5 320*568

아이폰6 375*667
iphone6plus 414*736

안드로이드 진영의 해상도는 예전에는 다양했는데 이제는 기본적으로 3가지로 나뉜다

720P 360*640

1080P 360*640

2K 360*640

이거 보고 어지러우신가요... 안드로이드가 애플보다 훨씬 낫다는 걸... ㅎㅎ 정말 이렇게 생겼네요

사실 우리가 해보고 싶은 건 적응형 웹이에요 페이지 및 이 자동 조정 가능한 범위의 최소 너비는 320px입니다. 즉, 코드는 320의 너비로 탐색할 수 있고 모바일 측에서는 어떤 단위가 사용되는지 확인해야 합니다. PC측에서 웹페이지를 만들 때 우리 모두가 익숙한 단위가 px인데, 모바일 단말에서도 이 단위를 사용한다고 할 수 있을까요? 앞으로 무슨 일이 일어날지 모르기 때문에 안 하는 것이 가장 좋습니다.

몇 가지 논의와 현재 국제적으로 인정되는 솔루션을 참조한 후에 사용되는 단위는 rem

입니다. 그렇다면 `rem`은 무엇인가요? `em`은 상위 항목에 대한 상대적인 크기 단위입니다. 그러면 `rem`은 `root의 약어입니다. -em`, 즉 루트 상대 단위이고, 상대 `html`의 `글꼴 크기` 단위입니다.

알겠습니다. html의 font-size 기본값은 16px입니다. 즉, 모든 크기는 얼마나 큰가요? 16px의 상대연산 결과 px,那么是不是在移动端我们也用这个单位呢?我只能说,你可以这样做.但是,最好不要.因为你不知道将来会发生什么.

我们经过一些探讨,和参考目前国际上通行的方案,采用的单位是rem

那么,什么是rem?我们都知道em是相对父级的尺寸单位.那么rem是root-em的缩写,也就是说,是根相对单位,其相对的是html的font-size的单位.

好了,那么html的font-size默认是多大呢?是16px.也就是说,你的所有的尺寸依靠,都是依据16px的相对运算的结果.

知道了这个之后,我们就开始了复杂的计算,比如,我要设定一个12px 的文字,需要用什么百分比.会发现,这个计算真心是坑爹啊,我在一个项目的一期就是这样做的.但是这个计算真心累.

于是,我们采用了变通的方法,我们给html修改默认的font-size.于是,我们是这样写的.

html {font-size: 10px;}

로그인 후 복사

整个世界都安静了,按照这个方法计算,真的特别方便,比如,我需要12px我就写1.2rem 就可以了.

但是,我迅速思考了一下这个问题,感觉我们在脱裤子放屁.

让我们回到起点,我们为什么要用rem而不用px呢?原因很简单,我们是为了让页面不会因为一些设备的特殊性而限定为px,是为了去适应各种设备.

而我们给html加上了px为单位的,不是又返回原样了吗?那到不如直接去使用px,我们还少写两个字符呢.

那么,问题没有解决的方法了吗?还是继续回到那反人类的计算当中去??

我迅速转换了一下思维,把这段代码改成了

html {font-size: 62.5%;}

로그인 후 복사

改成了百分比之后,这个问题迅速得到了解决.那样,浏览器在设置不同的默认文字大小的时候,我们的页面都可以跟随改变,而不在限定死了.

在PC端chrome浏览器中,默认最小文字是 12px

이 사실을 알게 된 후, 예를 들어 12px 텍스트를 설정하려면 어떻게 해야 할까요? 백분율을 사용해야 합니다. 이 계산은 프로젝트의 첫 번째 단계에서 수행한 것입니다. 하지만 이 계산은 정말 피곤합니다.

그래서 우리는 유연한 방법을 채택하여 기본 <코드를 수정했습니다. >font-size html이라 이렇게 작성했습니다.

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

로그인 후 복사

세상이 조용해요 네, 이 방법으로 계산하면 정말 편해요. 예를 들어 12px가 필요하면 그냥 하면 됩니다. 1.2rem을 쓰세요.

근데 이 문제에 대해 빨리 생각하고 바지를 벗고 방귀를 뀌는 느낌이 들었습니다.

돌아가자 출발점에서 왜 대신 rem을 사용합니까? px? 이유는 매우 간단합니다. px는 다양한 장치에 적응하기 위한 것입니다. html에 단위로 px를 추가했는데 원래 상태로 돌아가지 않나요? 그러면 px를 직접 사용하는 것이 더 낫습니다. 두 글자 줄여야지.

그럼 문제 해결 방법은 없는 걸까요? 아니면 계속 반인간 계산으로 돌아가는 걸까요??🎜🎜 급하게 생각을 바꿔서 이 코드를 🎜

* {box-sizing:border-box;}

로그인 후 복사

🎜로 바꿨습니다. 그런 식으로 브라우저가 다른 기본 텍스트 크기를 설정하면 페이지가 제한 없이 변경을 따를 수 있습니다. 🎜🎜PC Chrome 브라우저에서 기본 최소 텍스트는

12px<입니다. /code>. 이렇게 설정하고 개발자 도구를 사용하여 디버깅하면 이상한 점을 발견하게 됩니다. 따라서 브라우저의 최소 텍스트를 10 또는 6으로 설정해야 하며 일반적으로 6으로 설정해야 합니다. PC 측 디버깅 문제를 해결하세요. 모바일 측에는 그런 제한이 없습니다(있으나 기본적으로 꺼져 있습니다)🎜 🎜모바일 html5 페이지 메타 설정🎜🎜이에 대한 특별 기사가 있습니다. Baidu에서 검색해 보세요. 여기서는 다음 코드를 추가해야 함을 강조합니다.🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">box-shadow:0 0 1px #ddd;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>🎜Box width🎜🎜 일부 잘 알려진 프런트 엔드 프레임워크를 포함하여 일부 사람들은 이러한 코드를 CSS에 추가합니다. 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">box-shadow:0 0 0 1px #ddd</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>🎜 개인적으로는 별로 추천하지 않습니다. 박스 모델을 파괴하기 때문에 추가하고 나면 코드 작성이 편리하지만, 외부 리소스를 설정하면 변형되는 것을 볼 수 있습니다. 다시 조정할 수 없는 리듬입니다. 이유는 매우 간단합니다. 이 코드 줄은 페이지에 있는 모든 요소의 상자 모델을 변경합니다.🎜<p>曾经因为这一句代码,让我们前端的人排查一个问题排查了两天,始终无法解决.当我接手了项目之后,这个问题交给我,我一开始也莫名其妙.但是后来仔细检查,才发现是这一句代码惹的祸.</p><hr/><p>如果我们需要写一个盒子,默认是百分百宽的,我们怎么做呢?</p><p>答案是,我们什么都不做,那么它就是百分百了.</p><p>在做移动端页面的时候,尽量不要设定宽度,让它自然的占据一行,这时候我们可以根据需要设定外填充和内填充.</p><p>当然,并非所有的东西都可以这样来做,总会遇到多列布局的时候</p><p>这就需要注意了,不要给<code>rem

这样的单位的宽度,而是要给50%或者33.3%的宽度.

在设定了这样的宽度之后,不要给这个元素设定内填充和外填充.如果有需要的话,在这个元素里面再写一个元素,给这个元素加你所需要的填充.

另外,在布局上,要尽量少用浮动布局,适当在细节部分使用定位布局,并做好隐藏溢出等处理.以防止浮动布局可能出现的问题.关于定位问题,可以参考我的另外一篇博文 Css 详细解读定位属性 position 以及参数;

边框的处理

在PC端的网页制作中,我们一般就使用边框属性border: 1px solid #ddd;但是在移动端,就需要特别注意了,因为边框的宽度是计算在盒子模型当中的,所以,如果你使用不慎,可能造成你布局的困境.

因此,我们需要一些其他的参数来设定边框,一般矩形的元素,我们可以使用outline: 1px solid #ddd;来制作边框,这个属性是不会计算在盒子模型当中的.

另外,当你尝试做一个两列布局的列表的时候,使用这个参数,你会发现两个元素之间的边框好像是两个像素.对的,你没有看错,确实是两个像素.

怎么解决这个问题呢?一般情况下,你只需要给元素加上背景就可以解决这个问题.后面的元素的背景会遮住前面元素的outline发出来的边框.

这是一个非常实用的技巧.

但是,如果元素不是矩形的怎么办呢?

其实很好解决.因为,在CSS中,不仅仅是outline可以来模拟边框,还有一个属性,也是可以模拟边框的,那就是CSS3的box-shadow外发光属性.

例如,我要给元素加上一个1px的实线边框,你这样写,是不行的

box-shadow:0 0 1px #ddd;

로그인 후 복사

你会发现,你模拟出来的边框会有点发虚.

正确的写法是

box-shadow:0 0 0 1px #ddd

로그인 후 복사

;看到这样写很奇怪?去w3school看下就明白了.

当然,这两种做法都是有弊端的,比如我就想设置一条左边框的线条,而不时整个的都有边框怎么办?

还是有办法的,我们可以借助伪元素来实现模拟,:before和:after;具体怎么实现,这里不做演示了.

这里需要说明一下,网上有不少0.5px边框的实现教程,这样做的好处是,可以做出比较细的线条,让我们的H5看上去更像原生的APP.我个人的建议是,不要尝试这样做,因为很麻烦,而且兼容性都有问题,得不偿失.那么正确的做法是什么呢?很简单——跟你的设计师说,尽量不要设计线条-_-|||反正我就是这样跟我们团队的设计说的.