CSSモバイル適応レイアウト

モバイル適応、開発で遭遇する多くの問題

• px
• UI図 完璧な適応スキーム
• ランドスケープ適応
• HD画面のぼやけ問題 ...

適応の意味

要素、フォントサイズは、画面サイズに応じて変更することができ、サイズの大きさは、画面サイズに比例します。

適応方法

まず、ビューポートを設定します。

meta

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

分析

適応の解決方法

第1回：メディアからの照会

@media screen and (min-width:240px) {
 html, body, button, input, select, textarea {
 font-size:9px;
 }
}
@media screen and (min-width:320px) {
	html, body, button, input, select, textarea {
		font-size:12px;
	}
}
@media screen and (min-width:1000px) and (max-width: 1200px){
 html, body, button, input, select, textarea{
 font-size:16px
 }
}

: min-widthを使うと、小さい方が前で大きい方が後ろになります。同様に、max-widthを使うと、大きい方が前で小さい方が後ろになります。

2番目：rem

レイアウトのアイデア: - 通常、要素に特定の幅を設定することはありませんが、いくつかの小さなアイコンについては、特定の幅の指を設定することができます。

• 高さの値は、デザインの大きさに合わせて固定値に設定できます。
• 設定された固定値はすべてremです。
• jsは、実際の画面の幅を取得し、デザインの幅で割り、比率を計算させ、比率に応じて基準値をリセットします。

remは相対的な単位で、1remはhtml要素に設定されているfont-sizeのサイズと等しくなります。remで表されるサイズは、htmlのルート要素のfont-sizeのサイズを設定するだけで変更できます。

htmlのフォントサイズを動的に設定

PCベース

(function () {
 function setRootFontSize() {
 let rem, rootWidth;
 let rootHtml = document.documentElement;
 //表示されるページの最小幅を制限する
 rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
 // 19.2 = デザインサイズ幅÷100（デザインのレム値）= 100 ）
 rem = rootWidth / 19.2;
 // スタイルを動的に記述する
 rootHtml.style.fontSize = `${rem}px`;
 }
 setRootFontSize();
 window.addEventListener("resize", setRootFontSize, false);
})();

モバイル

(function () {
 function setRootFontSize() {
 let dpr, rem, scale, rootWidth;
 let rootHtml = document.documentElement;
 
 dpr = window.devicePixelRatio || 1; //モバイル用に設定する必要がある
 //表示されるページの最小幅を制限する
 rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
 rem = rootWidth * dpr / 19.2; // 19.2 = デザインサイズ幅1920 / 100（デザインのレム）= 100）
 scale = 1 / dpr;
 
 // HD効果を得るためにビューポートを拡大縮小するように設定する
 let vp = document.querySelector('meta[name="viewport"]');
 vp.setAttribute('content', 'width=' + dpr * rootHtml.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
 
 // スタイルを動的に記述する
 rootHtml.style.fontSize = `${rem}px`;
 }
 setRootFontSize();
 window.addEventListener("resize", setRootFontSize, false);
 window.addEventListener("orientationchange", setRootFontSize, false); // 
})();

別の書き方: webpackでpx2rem-loaderを使います。

rules:[
 {test:/\.css$/,
 use:['style-loader','css-loader','px2rem-loader?remUnit=75&remPrecision=8']
 }
]
// 一般的な750pxのデザインを解決するには、直接プロパティのサイズを埋めるためにデザインのサイズに応じて良い！
// 注：htmlファイルはフレキシブルファイルを導入する必要がある。
<script src="http://./mtb/lib-flexible/..2/??flexible_.js,.js"></script>

フロントエンドのビルドでは、この問題を解決するためにscssを使用することができます。

では、UEデザインドラフトから取得したピクセル単位の値を、どのように単位を変更した値に変換するのでしょうか？計算式は、要素幅 / UE図面幅 * 100 です。

UEダイアグラムのサイズが640pxで、UEダイアグラム内の要素の幅が100pxであるとします。

p {width: 15.625rem}

一個一個計算するのは面倒なので、scssのpx2rem関数で書けます。

$ue-width: 640; /* ueイメージの幅*/
@function px2rem($px) {
 @return #{$px/$ue-width*100}rem;
}
p {
 width: px2rem(100);
}

3番目：vw, vh

{
 loader: 'postcss-loader',
 options: {
 	plugins: ()=>[
 	require('autoprefixer')({
 		browsers: ['last 5 versions']
 	}),
 	require('postcss-px-to-viewport')({
 		viewportWidth: 375, //ビューポートの幅（数値）
 		viewportHeight: 1334, //ビューポートの高さ
 		unitPrecision: 3, //設定する小数点以下の桁数
 		viewportUnit: 'vw', //変換する単位を設定する
 		selectorBlackList: ['.ignore', '.hairlines'], //変換する必要のないクラス名
 minPixelValue: 1, //置き換える最小ピクセル値を設定する
 mediaQuery: false //メディアクエリーでpx変換を許可する
 	})
 	]
}

第四：フレックスレイアウト

原則：テキストフロー、コントロールの柔軟性、イメージのアイソメトリック・スケーリング。

第5回：postcss-px2remプラグイン

• ステップ1: webpackのpack.jsonファイルでpostcss-px2remプラグインを設定します。

css:{
 loaderOptions:{
 postcss:{
 plugins:[
 reuqire('postcss-px2rem')({remUnit:100}) //変換の基本
 ]
 }
 }
}

• ステップ2：通常のcssの記述注：ボーダーが1pxの場合、モデルによっては表示されない場合があります。

title:{
 margin:70px;
 width:200px;
 border: 1px solid red; /*no*/
}

適応プログラムの比較

• メディア クエリ ブラウザのサイズが変わったときに変更するスタイルが多すぎると、複数のスタイル コード セットが煩雑になります。
• remレイアウト レスポンシブレイアウトでは、ルート要素のfont-sizeのサイズをjsで動的に制御する必要があります。

モバイルでの太字1ピクセル表示の問題

pxはデバイスのピクセルに対する相対単位です。

• transform: scale(0.5)

div {
 height:1px;
 background:#000;
 -webkit-transform: scaleY(0.5);
 -webkit-transform-origin:0 0;
 overflow: hidden;
}

• デバイスのピクセル比率に基づくcssクエリ後の解決策 メディア

/* 2 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
 .border-bottom::after {
 -webkit-transform: scaleY(0.5);
 transform: scaleY(0.5);
 }
}
/* 3 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
 .border-bottom::after {
 -webkit-transform: scaleY(0.33);
 transform: scaleY(0.33);
 }
}

イメージのぼやけ問題

理由

通常使用するイメージのほとんどはビットマップで、ピクセルで構成され、各ピクセルは特定の位置と色の値を持っています。

解決方法

また、DPRの異なる画面では、解像度の異なるイメージを表示する必要があります。

• メディアクエリを使用して、異なるデバイスのピクセル比率を決定し、異なる精度でイメージを表示します。

.avatar {
 background-image:url(img_1.png)
}
@media only screen and (-webkit-device-pixel-ratio:2){
 .avatar {
 background-image:url(img_2.png)
 }
}
@media only screen and (-webkit-device-pixel-ratio:3){
 .avatar {
 background-image:url(img_3.png)
 }
}

• image-set

.avatar {
 background-image:-webkit-image-set("img_1.png" 1x,"img_2.png" 2x,"img_3.png" 3x)
}

• srcsetはimgタグの属性を使用し、ブラウザがピクセル密度に基づいて自動的に最適なイメージを表示します。

<img src="img_1.png" srcset="img_2.png 2x,img_3.png 3x">

• JavaScriptによるイメージURLのスプライシング window.devicePixelRatioを使用してデバイスのピクセル比率を取得し、すべてのイメージを繰り返し処理し、イメージアドレスを置き換えます。

const dpr = window.devicePixelRatio
const images = document.querySelectorAll('img');
images.forEach((img)=>{
 img.src.replace('.','@${dpr}x.')
})

ランドスケープ適応

• window.orientation: スクリーンの回転を取得します。

window.addEventListener('resize',()=>{
 if(window.orientation === 180 || window.orientation === 0) {
 // 通常の向き、または180度の画面回転
 console.log('縦画面')
 } 
 if(window.orientation === 90 || window.orientation === -90) {
 // 画面を時計回りに90度、または反時計回りに90度回転させる。
 console.log('ランドスケープ')
 }
})

• CSS横向きの検出

@media screen and (orientation:portrait){
 /* */
}
@media screen and (orientation:landscape){
 /* */
}