CSSにおけるremとモバイル端末でのレイアウト方法を深く理解する
pxについては皆さんよくご存知だと思いますが、remとなると知らない方もいると思います。今回はremとemとは何か、モバイル端末での配置方法を中心に紹介しますので、必要に応じて参考にしていただければ幸いです。
1.レムとは何ですか？
remはCSS3で新たに追加されたunit属性(ルート要素のフォントサイズ)で、ページのルートノードのフォントサイズに応じて変換される単位です。根！ ！ ！ ！ ！ ！ ！ ！ ！ルート ノード、つまり html。
例: (以下の例のルート ノードは html で、そのフォント サイズは 100px であるため、ルート ノード以下の要素に設定される rem は 1rem=100px です。)
rem 16px です。つまり、ルートノードのフォントサイズが設定されていない場合、1rem=16px
<html>
<head>
<style>
html,body{ font-size: 100px; }
header{ height: 1rem;width: 1rem; }
</style>
</head>
<body></body>
<header></header>
</html>em とは何ですか。相対単位でもあり、em 単位は親要素のフォント サイズに基づいて変換される単位です。 1. em の値は固定されていません。em は親要素のフォント サイズを継承します。
親ノード
例:
<header style="font-size:100px;">//父元素的字体大小是100px
<div style="height:1em;width:1em;"></div>//所以子元素的em是1em=100px；
</header>3. モバイル ページ開発スキル:
まずユーザーの使用状況を調査し、一般的なデバイスを要約します。一部のユーザーが使用していますか？ 例: 現在のユーザーのほとんどは 3 種類の携帯電話を使用しています。まず、インターネットから各携帯電話の解像度を調べます。
それらをすべてリストし、メディア クエリを作成します (携帯電話によって解像度が異なるため、ピクセルを使用すると、表示は同じになります。たとえば、子供たちが食事をしている場合、食堂では子供たちに肉まんを渡しますが、たくさん食べる子もいれば、少ししか食べない子もいて、十分に食べられなかったり、無駄になってしまうことがあります。そこで、食堂のおばちゃんが登場しました。アイデアがあれば、小さな友達には、重さ 50 ポンド未満の蒸しパン 1 つ、重さ 50 ポンド未満の蒸しパン 2 つ、これら 3 つの配布方法を受け取ることができます)
私のユーザー グループはおそらくこの 3 つです。デバイス
iphone5 320568 font-size: 12px; 1rem=12px
iphone6 375667 font-size: 14px; Plus 414* 736 font-size: 16px; 1rem=16px
最初に基本的なスタイルの書き込みを行うために中間デバイスを取り出します
最初の書き込みは、設計図に従って px で行うことができます (つまり、最初に選択してください 饅頭のサイズ)
テンプレート セットの作成を優先し、次にこのテンプレート セットに基づいて他のデバイス用のメディア クエリを作成します
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
width - ビューポート デバイスの幅
height - ビューポート デバイスの高さ initial-scale - 初期スケーリング率
minimum-scale - ユーザーが許可する最小比率
maximum-scale にズーム - ユーザーはズームすることができますuser-scalable の最大比率 - ユーザーが手動で拡大縮小できるかどうか
上で割り当てられたので、この方法でメディア クエリを作成します
html,body{ height: 100%; margin : 0; padding: 0; font-size: 14px;}// 初期スタイルは先頭に記述する必要があることに注意してください。 ！ ！ ！メディア クエリの一番下に書くと、上のメディア クエリをカバーします (カスケード スタイル シートなので~)
@media screen and (max-width:320px ) {
html{font-size: 12px;}
}
@media screen and (min-width:321px) and (max-width:750px ) {
html{font-size: 14px;}
}
@media screen and (min-width:751px ) {
html{font-size: 16px;}
}header{
width:140px;//转化为10rem，因为我们是基于最中间的设备做的，中间设备的font-size：14px，所以140px=10rem。
}以上がCSSにおけるremとモバイル端末でのレイアウト方法を深く理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7464
15
1376
52
77
11
18
19
Vue プロジェクトでモバイル ジェスチャ操作を使用する方法
Oct 08, 2023 pm 07:33 PM
Vue プロジェクトでモバイル ジェスチャ操作を使用する方法 モバイル デバイスの普及に伴い、モバイル端末上でよりフレンドリーなインタラクティブ エクスペリエンスを提供する必要があるアプリケーションがますます増えています。ジェスチャー操作はモバイルデバイスで一般的なインタラクション方法の 1 つで、ユーザーが画面にタッチするだけでスライドやズームなどのさまざまな操作を完了できるようになります。 Vue プロジェクトでは、サードパーティ ライブラリを通じてモバイル ジェスチャ操作を実装できます。以下では、Vue プロジェクトでのジェスチャ操作の使用方法と具体的なコード例を紹介します。まず、特別な機能を導入する必要があります
Vueモバイル端末のマルチタッチポイントの問題を解決
Jun 30, 2023 pm 01:06 PM
モバイル開発では、複数指のタッチの問題によく遭遇します。ユーザーがモバイル デバイス上で複数の指を使用して画面をスワイプまたはズームする場合、これらのジェスチャをどのように正確に認識して応答するかは、開発上の重要な課題です。 Vue 開発では、モバイル端末の複数指タッチの問題を解決するためにいくつかの対策を講じることができます。 1. vue-touch プラグインを使用する vue-touch は、モバイル側で複数指のタッチ イベントを簡単に処理できる Vue 用のジェスチャ プラグインです。 npm 経由で vue-to をインストールできます
REM（フルネームREMME）とは何ですか？
Feb 21, 2024 pm 05:00 PM
REMMEとは何のコインですか？ REMME は、安全性の高い分散型ネットワーク セキュリティと身元確認ソリューションの提供に特化したブロックチェーン テクノロジーに基づく暗号通貨です。このプロジェクトは、分散暗号化技術を使用してユーザー認証プロセスを強化および簡素化し、それによってセキュリティと効率を向上させることを目的としています。 REMME の革新性は、ブロックチェーンの不変性と透明性を利用して、より信頼性の高い本人確認方法をユーザーに提供することです。 REMME は認証情報をブロックチェーンに保存することで、集中認証システムの単一障害点を排除し、データの盗難や改ざんのリスクを軽減します。このブロックチェーンベースの認証方法は、より安全で信頼性が高いだけでなく、ユーザーに REMME の背景を提供します。
CSS レイアウト単位の進化と応用: ピクセルからルート要素のフォント サイズに基づく相対単位へ
Jan 05, 2024 pm 05:41 PM
px から rem へ: CSS レイアウト ユニットの進化と応用 はじめに: フロントエンド開発では、多くの場合 CSS を使用してページ レイアウトを実装する必要があります。過去数年にわたって、CSS レイアウト ユニットは進化し、発展してきました。最初は要素のサイズと位置を設定する単位としてピクセル (px) を使用しました。しかし、レスポンシブ デザインの台頭とモバイル デバイスの普及により、ピクセル ユニットにはいくつかの問題が徐々に明らかになってきました。これらの問題を解決するために、新しい単位 rem が登場し、CSS レイアウトで徐々に広く使用されるようになりました。 1つ
Vue開発におけるモバイル端末のダブルクリック増幅問題を解決する方法
Jun 29, 2023 am 11:06 AM
モバイル デバイスの普及に伴い、モバイル開発に Vue を使用することが一般的な選択肢になりました。ただし、モバイル開発中には、ダブルクリックしてズームインするという問題に直面することがよくあります。この記事では、この問題に焦点を当て、Vue 開発におけるモバイル端末でのダブルクリック増幅の具体的な解決方法について説明します。モバイル デバイスでのダブルクリック拡大の問題は、主に、タッチ スクリーンをダブルクリックすると、モバイル デバイスが Web ページのズーム率を自動的に拡大するために発生します。一般的な Web 開発では、この種のダブルクリックによる拡大は通常有益です。
PythonとBaidu Map APIを使用してモバイル地図位置測位機能を実装する方法
Jul 29, 2023 pm 11:33 PM
Python と Baidu Map API を使用してモバイル地図位置測位機能を実装する方法 モバイル インターネットの発展に伴い、地図位置測位機能はモバイル アプリケーションでますます一般的になりました。人気のプログラミング言語である Python は、Baidu Map API を使用してモバイル マップの位置情報機能を実装することもできます。以下では、Python と Baidu Map API を使用して地図位置決め機能を実装する手順と、対応するコード例を紹介します。ステップ 1: Baidu Map API キーを申請する 開始する前に、まず申請する必要があります。
Vue (Vant) でモバイル レスポンシブ レイアウトを実装するための完全なガイド
Jun 09, 2023 pm 04:09 PM
Vue (Vant) でモバイル レスポンシブ レイアウトを実装するための完全ガイド モバイル レスポンシブ レイアウトは、最新の Web 開発の非常に重要な部分です。モバイル デバイスの普及に伴い、ユーザーの携帯電話画面のサイズと解像度に迅速に対応する方法が重要になってきています。 a フロントエンドエンジニアが直面しなければならない課題の 1 つ。 Vue フレームワークにはレスポンシブ レイアウト機能が付属しており、レスポンシブ レイアウトの実装に役立つサードパーティ ライブラリも多数あります。その中でも、Vant コンポーネント ライブラリは、非常に強力で使いやすく、カスタマイズが簡単で、モバイル デバイスと完全な互換性があるため、Vue モバイル UI ライブラリです。
Vue 開発: モバイル端末でのジェスチャー スケーリングの問題の最適化
Jun 30, 2023 pm 04:33 PM
Vue 開発におけるモバイル ジェスチャ ズーム ページのスタック問題の解決方法 近年、モバイル アプリケーションの普及により、ジェスチャ操作はユーザー インタラクションの重要な方法となっています。 Vue 開発では、モバイル端末にジェスチャー ズーム機能を実装する際に、ページ ラグの問題がよく発生します。この記事では、この問題を解決する方法を検討し、いくつかの最適化戦略を提供します。ジェスチャー スケーリングの原理を理解する 問題を解決する前に、まずジェスチャー スケーリングの原理を理解する必要があります。ジェスチャー ズームはタッチ イベントをリッスンすることで実装され、ユーザーが 2 本の指で画面をスライドすると、ページも指のスライドの動きに追従します。
