モバイル Web アダプテーション ツール-rem_html/css_WEB-ITnose

rem に関して最初に思い浮かぶのは、rm や px などの単語です。これらの単位はフォント サイズの設定に使用されると考えられています。ただし、rem の場合は、モバイル側での応答性の高い適応に使用できます。

まずモバイル端末についての互換性を見てみましょう

ios: システム 6.1 以降でサポートされています

android: システム 2.1 以降でサポートされています

ほとんどの主流のブラウザーがサポートしているので、続きを読むことができます安心して。

remはフォントサイズを設定します

remは(ルート要素のフォントサイズ)、公式説明

、

はWebページの要素に応じてフォントサイズを設定するという意味とemとの違い(要素のフォント サイズ) は、 em は親要素のフォント サイズに基づいて設定され、rem は Web ページ要素 (html) のフォント サイズに基づいて設定されます。簡単な例を挙げると、

ほとんどのブラウザ現在、IE9+、Firefox、Chrome、Safari、Opera が使用されており、関連するフォント設定を変更しない場合、デフォルトの表示フォント サイズは 16 ピクセルです。つまり、

html {    font-size:16px;}

次に、フォント サイズを 12 ピクセルに設定したい場合P タグの場合、rem を使用してそれを書きます

p {    font-size: 0.75rem; //12÷16=0.75（rem）}

基本的に、rem の単位を使用してフォント サイズを設定するのは、基本的にこのルーチンです。利点は、ユーザーがブラウザのデフォルトのフォント サイズを自分で変更できることです。 , そのため、レムを使用する場合は、調整されたサイズに合わせて表示できます。 ただし、rem はフォントに適用できるだけでなく、幅、高さ、マージンなどの単位にも使用できます。それについて詳しく話しましょう

画面適応のためのレム

画面適応について話す前に、モバイル端末適応の一般的な方法について話しましょう。これは一般に次のように分けられます:

1 より単純なページ、一般に非常に直接的なセット固定値にすると、幅は通常画面全体に表示されます。

2 もう少し複雑なのは、パーセンテージを使用して適応する要素のサイズを設定するか、flex やその他の CSS を使用してカスタマイズが必要な幅を設定することです。

3 より複雑で応答性の高いレスポンシブ ページの場合、css3 のメディア クエリ属性を使用して適応させる必要があります。一般的な考え方は、さまざまな画面サイズに応じて対応する CSS スタイルを設定することです。 上記の方法の中には、実際に画面適応などの問題を解決できるものもありますが、rem という新しいものが登場しているため、これらの側面を確実に考慮することができます。 それでは、rem の具体的な使用方法について説明します。

rem 適応

見てみましょう。まずは簡単な例:

.con {      width: 10rem;      height: 10rem;      background-color: red; }<divclass="con">        </div>

これは div です。ブラウザではこのように幅と高さが 160px で表示されます。それぞれ正確に 16px * 10 なので、HTML ルート要素のデフォルトの font-size が変更された場合はどうなるでしょうか。

html {    font-size: 17px;}.con {      width: 10rem;      height: 10rem;      background-color: red; }<divclass="con">        </div>

もう一度結果を見てみましょう:

この時点で、幅と高さは両方とも 170px です。これは、rem を幅と高さに適用すると、rem と同じ特性が適用できることを示しています。このことから、CSS スタイルで適応効果を実現するために、HTML に異なる値を設定できると考えることができるはずです。

rem 数値計算

rem を使用して CSS 値を設定する場合、通常は 1 層の計算を行う必要があります。たとえば、長さと幅が 100px の div を設定したい場合は、次の手順を実行する必要があります。 100px に対応する rem 値は 100 / 16 =6.25rem であると計算します。CSS を記述する場合、これは実際には比較的複雑な手順です。

Sass を使用しないプロジェクトの場合:

便宜上、HTML の font-size を 100px に設定すると、単位を記述するときに値を 100 で割って rem 単位を追加するだけです。

Sass を使用するプロジェクトの場合:

フロントエンド構築では、scss を使用してこの問題を解決できます。たとえば、scss 関数 px2rem を作成できます:

@function px2rem($px){    $rem : 37.5px;    @return ($px/$rem) + rem;}

このように、特定の値を書き込むとき。 as:

height: px2rem(90px);width: px2rem(90px);;

これを見ると、上記の rem:37.5px がどこから来たのかがわかります。これは、通常の状況ではデフォルトの 16px ではないでしょうか。ページのフォントサイズに関係します。

rem ベンチマーク値の計算

rem のベンチマーク値、つまり上記の 37.5px については、主に次の理由により、実際には入手したビジュアル ドラフトに基づいて決定されます:

1 私たちが作成したページのため、それが必要です異なる画面サイズのデバイスで実行するには

2 したがって、スタイルを作成するときは、まず参照として特定の画面を用意する必要があります。これは、取得したビジュアル ドラフトによって決まります

3 受け取ったビジュアル ドラフトは次のとおりです。 iPhone6の画面に基づいてデザインされました

4iPhone6の画面サイズは375pxです、

すごいですね

这样计算出来的rem基准值就是37.5（iphone6的视觉稿），这里为什么要除以10呢，其实这个值是随便定义的,因为不想让html的font-size太大，当然也可以选择不除，只要在后面动态js计算时保证一样的值就可以，在这里列举一下其他手机的

iphone3gs: 320px / 10 = 32px

iphone4/5: 320px  / 10 = 32px

iphone6: 375px  / 10 =37.5px

动态设置html的font-size

现在关键问题来了，我们该如何通过不同的屏幕去动态设置html的font-size呢，这里一般分为两种办法

1利用css的media query来设置即

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){      html{font-size: 37.5px;}}

2利用javascript来动态设置 根据我们之前算出的基准值，我们可以利用js动态算出当前屏幕所适配的font-size即：

document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';

然后我们看一下之前那个demo展示的效果

.con {      width: px2rem(200px);      height: px2rem(200px);      background-color: red;}<divclass="con">        </div>document.addEventListener('DOMContentLoaded', function(e) {                document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';}, false);

iPhone6下，正常显示200px

在iphone4下，显示169px

由此可见我们可以通过设置不同的html基础值来达到在不同页面适配的目的，当然在使用js来设置时，需要绑定页面的resize事件来达到变化时更新html的font-size。

rem适配进阶

我们知道，一般我们获取到的视觉稿大部分是iphone6的，所以我们看到的尺寸一般是双倍大小的，在使用rem之前，我们一般会自觉的将标注/2，其实这也并无道理，但是当我们配合rem'使用时，完全可以按照视觉稿上的尺寸来设置。

1设计给的稿子双倍的原因是iphone6这种屏幕属于高清屏，也即是设备像素比(device pixel ratio)dpr比较大，所以显示的像素较为清晰。

2一般手机的dpr是1，iphone4，iphone5这种高清屏是2，iphone6s plus这种高清屏是3，可以通过js的window.devicePixelRatio获取到当前设备的dpr，所以iphone6给的视觉稿大小是（*2）750×1334了。

3拿到了dpr之后，我们就可以在viewport meta头里，取消让浏览器自动缩放页面，而自己去设置viewport的content例如（这里之所以要设置viewport是因为我们要实现border1px的效果，加入我给border设置了1px，在scale的影响下，高清屏中就会显示成0.5px的效果）

meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');

4 设置完之后配合rem，修改

@function px2rem($px){    $rem : 75px;    @return ($px/$rem) + rem;}

双倍75，这样就可以完全按照视觉稿上的尺寸来了。不用在/2了，这样做的好处是：

1解决了图片高清问题。

2解决了border 1px问题（我们设置的1px，在iphone上，由于viewport的scale是0.5，所以就自然缩放成0.5px）

在iphone6下的例子：

我们使用动态设置viewport，在iphone6下，scale会被设置成1/2即0.5，其他手机是1/1即1.

meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');

我们的css代码，注意这里设置了1px的边框

.con {            margin-top: 200px;            width: 5.3rem;            height: 5.3rem;            border-top:1px solid #000; }

在iphone6下的显示：

在android下的显示：

rem进行屏幕适配总结

下面这个网址是针对rem来写的一个简单的demo页面，大家可以在不同的手机上看一下效果

但是rem也并不是万能的，下面也有一些场景是不适于使用rem的

1当用作图片或者一些不能缩放的展示时，必须要使用固定的px值，因为缩放可能会导致图片压缩变形等。

在列举几个使用rem的线上网站：

网易新闻： http://3g.163.com/touch/news/subchannel/all?version=v_standard

聚划算： https://jhs.m.taobao.com/m/index.htm#!all

参考资料： http://www.nihaoshijie.com.cn/index.php/archives/593