モバイル H5 開発に関するコンテンツのまとめ -- CSS_html/css_WEB-ITnose

1. モバイル開発用のビューウィンドウの追加

次の段落は h5 開発に必要です

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

その他の関連する設定内容は次のとおりです。

• width ビューポートの幅 (数値/デバイスの幅)
• 高さ ビューポートの高さ (数値/デバイスの高さ) )
• initial-scale 初期スケーリング
• maximum-scale 最大スケーリング
• minimum-scale 最小スケーリング
• user-scalable ユーザースケーリングを許可するかどうか (はい/no)
• minimal-ui iOS 7.1 beta 2 の新しい属性 (注: iOS8 では削除) により、ページの読み込み時に上下のステータス バーを最小化できます。

2. メディアクエリの改善

以前モバイル開発をしていた時、複数の画面に適応するために。レム単位が使用されます。このとき、ルートノード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%;    }}

には 2 つの明らかな 欠点があります。

• 適応された画面のサイズが連続していません。
• このようなクエリ コードの大部分を CSS ファイルに追加します。 CSSファイルのサイズが大きくなりました。

その後、淘宝網のモバイルページ適応ルールを参照し、jsを使用してクライアントの幅を取得し、デザイン案のプロトタイプに基づいてフォントサイズの値を動的に計算しました。

詳細については、こちらをご覧ください。iPhone6 の設計案に基づいてレム値を動的に計算します

3.a タグ内容の意味化

ほとんどの場合、クリックしてジャンプする機能をエリアに追加します。以下に示すように:

製品領域はすべて div タグを使用している可能性があります。最外層に a タグを追加するのは簡単です。 a はインライン要素であるため、幅と高さはありません。コンテナが開けられない。解決策の 1 つは、block 属性を a タグに設定することです。以下のとおりです。

<style>    a{display:block;}</style><a>    <div></div></a>

機能的には問題ありません。しかし、セマンティック レベルでは、上記のコードは標準ではありません。

HTML コードが邪魔にならないように次の変更を加えるのが最善の方法です。

<style> a{display:block;} span{dispaly:block;}</style><a>    <span></span>    <span></span>    <span></span></a>

4. 自分のページの最大幅と最小幅を設定します

rem 単位を使用し、js を使用してフォント サイズの値を動的に計算すると、端末画面の最大幅と最小幅を無限に適応させることができます。しかし、ユーザーの画面が一定サイズを超えて h5 ページを表示し続けると、ユーザーにとって非常に不親切になります。 JD.com と Taobao

の h5 ページを見てみましょう。どちらもページの最大幅と最小幅を定義していることがわかります。これにより、画面が一定サイズを超える場合に、より分かりやすい表示が可能になります（もちろん必要ありません）。

商品ページに定義した最大幅と最小幅は次のとおりです:

{    max-width:640px;    min-width:320px;}

5. a を削除します。モバイルブラウザのデフォルトの入力スタイル

1.ラベルの背景を無効にする

モバイル側でラベルをボタンとして使用する場合は、 をクリックして「 「暗い」背景が表示されます。背景を削除する方法は次のとおりです。

a,button,input,optgroup,select,textarea {    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/}

2. aの長押しは禁止されています。 imgタグを長押しするとメニューバーが表示されます

aタグを使用する場合、モバイル端末を長押しするとメニューバーが表示されます この時、メニューバーの呼び出しを禁止する方法は以下の通りです。 :

a, img {    -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/}

3.スムーズスクロール

body{    -webkit-overflow-scrolling:touch;}

6.CSS 切り詰め文字列

単一行の切り詰め文字列。ここでは文字列の幅を指定する必要があります

{    /*指定字符串的宽度*/    width:300px;       overflow: hidden;      /* 当字符串超过规定长度，显示省略符*/     text-overflow:ellipsis;      white-space: nowrap;   }

7.calc 関連の問題

レイアウト時に calc を使用すると、オンラインで重大なバグが発生しました。その後、この属性の使用法を詳しく調べました。 calc の優れた点は、任意の単位間で変換できることです。ただし、ブラウザのサポートはあまり良くありません。 使用できます:

のスクリーンショットを見てください。使用する場合は、互換性を確保するためにメーカーのプレフィックスを追加してください。ただし、ブラウザのサポートが制限されているため、現時点では使用はお勧めできません。サンプルコード:

#formbox {  width:  130px;  /*加厂商前缀，操作符（+，-，*，/）两边要有空格）*/                 width:  -moz-calc(100% / 6);     width:  -webkit-calc(100% / 6);     width:  calc(100% / 6);     border: 1px solid black;  padding: 4px;}

タオバオ、天猫、JD.com の h5 ページを調べたところ、このユニットは主にあまり使用されていないことがわかりました。互換性の問題に。

8. ボックス サイズ設定の使用

異なるブラウザーでのボックス モデルのパフォーマンスが一貫していない問題を解決します。ただし、互換性の問題は依然として残ります。以下のブラウザのサポート リストを参照してください。

box-sizing プロパティは、デフォルトの CSS ボックス モデルが要素の高さと幅を計算する方法を変更するために使用されます。この属性は、標準ボックス モデルを適切にサポートしていないブラウザの動作をシミュレートするために使用されます。

これには 3 つの属性値があります:

content-box 默认值，标准盒模型。 width 与 height 只包括内容的宽和高， 不包括边框，内边距，外边距。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;padding-box width 与 height 包括内边距，不包括边框与外边距。border-box width 与 height 包括内边距与边框，不包括外边距。这是IE 怪异模式（Quirks mode）使用的 盒模型 。注意：这个时候外边距和边框将会包括在盒子中。比如 .box {width: 350px; border: 10px solid black;} 浏览器渲染出的宽度将是350px.

浏览器支持：

9.水平垂直居中的问题

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

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

html 代码如下：

 <div class="parent-div">        <div class="child-div"></div> </div>

css代码如下：

.parent-div{            width: 100px;            height: 100px;            background-color:red;            position:relative;        }        .child-div{            width:50px;            height:50px;            background-color:#000;            position: absolute;            margin:auto;            top:0;            left:0;            right:0;            bottom:0;        }

绝对定位在布局中可以很方边的解决很多问题，但是大多数时候都不去使用绝对定位，而是使用浮动等方法。而当需要 DOM 元素脱离当前文档流的时候才使用绝对定位。如： 弹层，悬浮层等。

10. css 中 line-height 的问题

line-height 一个很重要的用途就是让我们的文本可以在父级元素中垂直居中，但是在使用它的过程中也会遇到一些问题。

先来看一个实例，如下图：

代码也很简单，就是当我们在div 中定义的字体很大的情况下，我们看到字体和父级元素之间有一些空隙。那么这是为什么？我们查一下 line-height 的定义，如下：

normal 默认。设置合理的行间距。number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。length 设置固定的行间距。% 基于当前字体尺寸的百分比行间距。inherit 规定应该从父元素继承 line-height 属性的值。

所以在以上的情况我们要想使，我们的字体能够撑满我们的容器，就需要给父级容器添加 line-height属性且值为 100%

代码和效果如下：

那么为什么会出现上面的问题呢？

line-height 与 font-size 的计算值之差(行距)分为两半，分别加到一个文本行内容的顶部和底部。

所以，可以得出下面的一个公式：

空白间距 = line-height – font-size

所以，当设置为line-height 的值为100%的时候，line-height的值就等于 font-size的尺寸，此时的空白间距为0。

11.使用 vertical-align 调整图标垂直居中

很多时候我们要把图标和文字配合使用，而且需要图标和文字都能够垂直居中。如下图所示：

如果要实现文字的垂直居中很容易，只需要使用line-height=父容器高度 。但是要想使图标能够垂直居中就比较麻烦。正常情况下我们的文字或者说相邻的容器，都应该和文字保持在相同的底线上，如下图：

明显的可以看到我们的返回图标不是垂直居中的。那么应该怎么样使图标垂直居中呢？

首先，我们先来搞清楚几个线的关系（图片来源于网络，侵权请告知）：

这样我们就要用到 vertical-align 这个属性，最重要的一点是:指定了行内（inline）元素或表格单元格（table-cell）元素的垂直对齐方式

baseline：将支持valign特性的对象的内容与父级元素基线对齐sub：元素基线与父元素的下标基线对齐。super：元素基线与父元素的上标基线对齐。top： 元素及其后代的顶端与整行的顶端对齐。text-top：元素顶端与父元素字体的顶端对齐。middle：元素中线与父元素的基线对齐。bottom：元素及其后代的底端与整行的底端对齐。text-bottom：元素底端与父元素字体的底端对齐。percentage：用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。length：用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。（CSS2）

看下边的一段 html ：

<div class="title-div">        <img src="1_icon.png" alt="返回图标">        <!-- <span >图标位置</span> -->        <span>我就是标题</span></div>

最初的结果是这样子的

我们想实现如下图所示的结果，图标相对于右边的字体居中：

这个时候我们就要使用vertical-align属性和设置他的length属性，即设置我们的图标相对与文字基线的偏移量。当我们加入属性的时候很容易使图标和文字都垂直居中。

{    vertical-align:15px;}

这个时候就会是我们的图标和字体相对于父级元素居中。

12.flex 弹性盒模型的使用

flex 现在 pc 端支持的不好（主要是因为还有很多 IE8，9的用户存在。）大多情况下我们都是在移动端使用flex布局。但是就算是这样，也会有很多坑人的 bug出现。谈谈一些基本的使用经验吧，什么时候使用 flex 。

1.什么时候使用 flex 属性

先来看一个产品模型如下图

我的左边商品和右边商品的宽度是一样的。当我看到这个模型的时候，第一件就是想就是使用 flex 让我们两列商品列表平分屏幕区域。这个时候就是用flex 来做。父级元素如下定义

{       margin-bottom: .5rem;    display: box;    display: -webkit-box;    display: -ms-flexbox;    display: flex;    display: -webkit-flex;    -webkit-flex-flow: row;    -ms-flex-flow: row;    flex-flow: row;}

2.添加厂商前缀

使用 flex 的时候一定要记得加厂商前缀（目前使用方式都有三种写法：1，旧的2，过度的3，新的)。不然肯定会有兼容性问题。

{    display: -webkit-box;    display: -ms-flexbox;    display: flex;    display: -webkit-flex; }

3.flex低版本浏览器的兼容

先看我的代码：

{    box-flex: 1;    -webkit-box-flex: 1;    -webkit-flex: 1;    -ms-flex: 1;    flex: 1;    width: 18.5rem;}

这里只是让左右两边平分屏幕的宽度。之前使用 flex在安卓4.3的手机上遇到一个问题。正常的页面应该如下图所示，

但是在 安卓4.3的手机上却是如下的结果

后来研究了下天猫的页面（因为之前使用这个 flex 就是参考天猫来学习的），看到他们在定义flex值的时候 都会有这样的一个属性width=0;

而且当我给我的页面也加上这个属性的时候，页面的布局也变得正常了。我现在想不明白愿意是什么，只能当一个 hack 来使用。如果大家也遇到这个问题，请试一下添加这个属性。如果大家知道为什么这么用，请指教一下。

13.CSS3动画性能的问题

给大家推荐一个网站（点击这里）可以检测我们平时使用的 css 属性改变元素样式的时候，触发的是 cpu还是 gpu ，特别是在做动画的时候，如果使用 gpu 渲染图形，可以减少 cpu 的消耗，提高程序的性能。

比如我们做一个 slider 动画切换图片位置的时候，会使用margin-left的属性，通过网站查询该属性值得到如下的结果

由上可以知道使用margin-left 的时候会处罚页面的重绘和重排。

但是当我们使用css3新属性transform 来代替传统的 margin-left 来改变元素位置的时候对页面有什么影响呢？先来看下网站查询的结果：

由查询结果可以知道，使用transform 不会触发任何的重绘。而且会触发 gpu 来帮助页面的排版。即使用GPU操作渲染动画，减少cpu的消耗，提高性能。

css动画简单实例，css代码如下：

.lottery-animation {    -webkit-animation: lottery-red 2s;    animation: lottery-red 2s;    -webkit-animation-iteration-count: infinite;    animation-iteration-count: infinite;}@-webkit-keyframes lottery-red {    from {        -webkit-transform: rotateY(0deg);        transform: rotateY(0deg);    }    to {        -webkit-transform: rotateY(360deg);        transform: rotateY(360deg);    }}@keyframes lottery-red {    from {        -webkit-transform: rotateY(0deg);        transform: rotateY(0deg);    }    to {        -webkit-transform: rotateY(360deg);        transform: rotateY(360deg);    }}

效果如下图：

这里我只是对图像标签添加了一个 class="lottery-animation"

我截取动态图片软件的问题，我的这个gif 截图动画有些卡顿，不流畅。在正常机器上是没有问题的（如果大家有mac下好用的 gif截图软件可以推荐给我，谢谢！）。

关于 css3 动画性能优化推荐阅读文章：1.前端性能优化之更平滑的动画(更新)2.CSS3硬件加速也有坑！！！

---

良いと思ったら、github (クリックしてください) アドレスにアクセスし、スターを付けてください。ありがとう！