マイクロサイト-flexible.js を使用してモバイルデバイスの適応を実装する_html/css

マイクロサイト-flexible.js を使用してモバイルデバイスの適応を実装する_html/css_WEB-ITnose

不言

リリース： 2018-05-19 15:25:54

オリジナル

1755 人が閲覧しました

モバイル Web 開発はますます人気が高まっており、モバイルへの適応も問題となっています。同じサイズの要素を異なるデバイス上で同じサイズで表示することはできません。 (iPhone 6 と iPhone 4 のサイズは異なる必要があります。そうしないと、ユーザーエクスペリエンスが非常に悪くなります)

以下では、750px のデザインドラフトを例として、複数の端末に適したページの作成方法を分析します。

まず、最終的なレンダリングを見てみましょう:

iphone 6

pic1.png

iphone4

pic2.png

デバイスが異なれば要素のサイズも異なります。。

これはあなたが望んでいた結果ですか？この効果はどのようにして得られるのでしょうか?

心配しないで、時間をかけていきましょう。

まず、次の概念を理解する必要があります:

上記にはたくさんの内容がありますが、実際には、インターネット上に非常に簡単な紹介がたくさんあります。一般的な理解があるので。

cssピクセル

物理ピクセル

devicePixelRatio

レイアウトビューポート

ビジュアルビューポート

理想的なビューポート

2.使用するライブラリを理解するflexible.js

モバイルタオバオは2014年半ばから柔軟なデザインを完全に実装しました。柔軟とは何ですか?実際、フレキシブルはローエンド形式であり、レスポンシブの基礎です。

タオバオモバイルは JS を使用してメタタグを動的に記述します。タオバオモバイルの柔軟なソリューションは、スケールと HTML フォントを設定するために rem および px 単位 + js を使用することです。このプロジェクトは GitHub で見つけることができ、オンラインで情報を確認することで詳細を知ることができます。

3. 開発をスピードアップするための崇高なテキストプラグインについて学びます。これは必須ではなく、手動で計算することもできます。このプラグインのインストール方法と使用方法については、以前に書いた記事で説明しています。本当に、本当に、重要なことを 3 回言います~

4. では、実際にテーマを始めましょう。私が作成したページのデザイン原稿は750pxで、写真と事実が含まれています。

pic3.png

ほら、嘘じゃないよ〜

トップを例に作り方を紹介しますまずはデザイン案を見てください

pic4.png

高さを取得します。上部から PS まで、750 デザインドラフトでは 96px であるため、対応する rem 値を取得するには 96/(750/10) を使用する必要があります。

.msg-header{    
position: relative;    
padding: 0 0.4rem;    
height: 1.28rem; //96/(750/10)    
line-height: 1.28rem;    
font-size: 0.48rem;    
text-align: center;    
border: 0.026667rem solid #eaeaea;
}

ログイン後にコピー

このようにして、最終的に望む結果が得られます。とてもシンプルですね。 5. 最後に、作成した HTML、CSS、そして最終的に生成された HTML を見てみましょう

html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><script src="flexible.js"></script>
<link rel="stylesheet" href="index.css"></head><body><section>    
<p class="msg-header clearfix">        
<a href="javascript:void(0);" class="baseIcon iconBack fl"></a>        
<span>消息</span>        
<a href="javascript:void(0);" class="fr clear">清空全部</a>    
</p></section><section class="container msg-content">    
<p>        
<p>            
<span class="baseIcon iconMsg"></span>        
</p>        
<p class="media-right msg-right">            
<h3 class="clearfix title">平台公告 <span class="fr date">2015-10-11</span></h3>            
<p>2015冬款上新2015冬款上新2015冬款上新</p>        
</p>    
</p>    
<p>        
<p>            
<span class="baseIcon iconMsg"></span>        
</p>        
<p class="media-right msg-right">            
<h3 class="clearfix title">平台公告 <span class="fr date">2015-10-11</span></h3>            
<p>2015冬款上新2015冬款上新2015冬款上新</p>        
</p>    
</p></section></body></html>

ログイン後にコピー

css

此处省略初始化的样式.
clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden}
.clearfix{*+height:1%;}
.fl{float: left;}.
fr{float: right;}.
baseIcon{
display: inline-block;
background: url(bgIcon.png);
background-size:6.666667rem 6.666667rem;}
.msg-header{
position: relative;
padding: 0 0.4rem;height: 1.28rem;
line-height: 1.28rem;
font-size: 0.48rem;
text-align: center;
border: 0.026667rem solid #eaeaea;}
.iconBack{
position: absolute;
top: 0.373333rem;
left:0.373333rem;
width: 0.346667rem;
height: 0.533333rem;
background-position: -1.493333rem -1.066667rem;}
.msg-header 
.clear{position: absolute;
right: 0.266667rem;
font-size: 0.4rem;
color: #666;
text-decoration: none;}
.media-left,.media-right{
display: table-cell;
vertical-align: top;}
.media-right{width: 100%;border-bottom: 1px solid #eee;
}.iconMsg{width: 1.253333rem;height: 1.253333rem;
background-position: -2.293333rem 0;
}.media-left{padding: 0.266667rem;
}.msg-right{padding: 0.266667rem;
}.msg-right .title{font-size: 0.426667rem;color: #333;
}.msg-right .date{font-size: 0.293333rem;color: #999;
font-weight: normal;
}.msg-right .desc{margin-top: 0.133333rem;
font-size: 0.346667rem;color: #888;}

ログイン後にコピー

ページによって生成された HTML は、フレキシブルによってページにいくつかの変更が追加されていることに注意してください

。 pic5.png

マイクロサイト - ここでは、flexible.js を使用したモバイルデバイスへの適応の実装について紹介します。試してみると、その利点がわかります。