知っておきたいモバイルHTML5の基礎知識ポイント

一个新手

リリース： 2017-09-06 10:12:51

オリジナル

1541 人が閲覧しました

知っておくべきモバイルHTML5の基礎知識

この会社に来てからは、前職でPCページの仕事をしていたのとは大きく変わりました。私は主にモバイルページを担当しました

PC ページの作成に慣れている人としては、モバイルページは非常に簡単なものであるはずですが、始めてみると、モバイルページはまだ難しいことがわかりました。 DOM 構造ははるかに単純ですが、その理由は非常に単純で、すべての携帯電話での異なる解像度の表示効果を考慮する必要があります。携帯端末の解像度は何ですか?

iPhoneを例に挙げると、次の解像度があります

iphone4 640*960

iPhone5 640*1136

iPhone6 750*1334
iphone6plus 1242*2208

Android陣営の解像度は昔は色々ありましたが、今は基本的に3つに分かれています

720P 720*1280

1080P 1080*1920

2K 1440*2560

これは幻想です。実際、H5 携帯電話を作成していたとき、解像度はまったくこのようなものではありませんでした。ブラウザでの実際の解像度は

です。次の解像度の例

iphone4 320*480

iPhone5 320*568

iPhone6 375*667
iphone6plus 414*736

Android陣営の解像度は以前は色々ありましたが、現在は基本的に3つに分かれています

720P 360*640

1080P 360*640

2K 360*640

これを見たら目まいがしませんか... Apple よりも Android の方がはるかに優れていることがわかりました... あはは、本当にこんな感じです

実際、私たちがやりたいのはアダプティブウェブですつまり、コードは幅 320 で閲覧でき、縮小したり変形したりできないようにする必要があります。どのような場合に使用されますか? PC 側で Web ページを作成する場合、私たちが慣れ親しんでいる単位は px ですが、モバイル端末でもこの単位を使用できますか? しかし、これはできるとしか言えません。将来何が起こるかわからないので、しないのが最善です。何が起こったのか

いくつかの議論と現在国際的に受け入れられている解決策を参照した後、使用される単位は rem です

では、`rem` とは何でしょうか?`em` が親に対する相対的なサイズの単位であることは誰もが知っています。`rem` は `root の略称です。 -em`、つまり、ルート相対単位であり、その相対単位です。`html` の `font-size` の単位です。 `html` の `font-size` のデフォルト値は `16px` です。つまり、すべてのサイズは `16px` に基づいています。 `16px` の相対演算の結果

これを理解した後、たとえば、12px のテキストを設定したい場合は、次のようになります。この計算は本当に不正であることがわかります。しかし、この計算は本当に面倒です。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

そこで、デフォルトの font-size for html ということで、このように書きました

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

ログイン後にコピー

世界全体が静かですはい、たとえば 12px が必要な場合は、この方法に従って計算するのが非常に便利です。 1.2rem と書きます。

しかし、私はこの問題についてすぐに考え、ズボンを脱いでオナラをしているように感じました。

戻りましょう開始点で、なぜ rem の代わりに使用するのでしょうか。 px? 理由は非常に単純です。いくつかのデバイスの特性により、ページを に限定しないようにするためです。<p></p> <code>html に px をユニットとして追加しましたが、元の状態に戻りませんか? それなら、 px を直接使用する方が良いでしょう。文字を 2 つ減らす必要があります。

それで、問題の解決策はありませんか? それとも、反人間的な計算に戻り続けますか??🎜🎜 私はすぐに考えを変え、このコードを 🎜

* {box-sizing:border-box;}

ログイン後にコピー

🎜 に変更しました。このようにして、ブラウザーがさまざまなデフォルトのテキストサイズを設定すると、ページは制限ではなく変更に従うことができます。🎜🎜 PC の Chrome ブラウザーでは、デフォルトの最小テキストは

12px< です。これを設定して開発者ツールを使用してデバッグすると、ブラウザの最小テキストを 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>🎜ボックス幅🎜🎜いくつかの有名なフロントエンド フレームワークを含め、このようなコードを 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.我个人的建议是,不要尝试这样做,因为很麻烦,而且兼容性都有问题,得不偿失.那么正确的做法是什么呢?很简单——跟你的设计师说,尽量不要设计线条-_-|||反正我就是这样跟我们团队的设计说的.