var designWidth=document.getElementsByTagName("head")[0].getAttribute("design-width");
font_size(designWidth);
function font_size(devwidth){
function _size(){
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth>=devwidth) deviceWidth=devwidth;
document.documentElement.style.fontSize = deviceWidth/(devwidth/100) + 'px';
}
_size();
window.onresize=function(){
_size();
};
}
var media = document.createElement('style');
media.innerHTML = "@media screen and (min-width:" + designWidth + "px){.center{width:"+designWidth+"px;margin-left:-"+designWidth/2+"px;left:50%;}}";
document.getElementsByTagName('head')[0].appendChild(media);
主な機能
- デザイン幅の取得:
<head>
タグのdesign-width
属性からデザイン幅を取得します。この値は、アプリケーションやウェブページが設計された基準の幅です。
- フォントサイズの設定:
font_size
関数を呼び出し、デバイスの幅に基づいてフォントサイズを動的に設定します。
- ウィンドウサイズの変更に対応:
- ウィンドウのリサイズイベントに応じて、フォントサイズを再計算し、更新します。
- メディアクエリの追加:
- デザイン幅以上の画面サイズのときに適用されるCSSスタイル(
.center
クラス)を動的に作成し、<head>
に追加します。
- デザイン幅以上の画面サイズのときに適用されるCSSスタイル(
動作の流れ
- デザイン幅の取得:
designWidth
変数に、<head>
からdesign-width
属性の値を格納します。
- フォントサイズの設定:
font_size
関数が呼び出され、引数としてデザイン幅が渡されます。_size
内部関数が定義され、デバイスの幅(deviceWidth
)を取得します。deviceWidth
がデザイン幅以上の場合はデザイン幅に制限され、document.documentElement.style.fontSize
としてフォントサイズが設定されます。
- リサイズイベントの処理:
- ウィンドウがリサイズされるたびに、再度
_size
関数が呼ばれ、フォントサイズが更新されます。
- ウィンドウがリサイズされるたびに、再度
- メディアクエリの作成:
- 新しい
<style>
要素を作成し、media.innerHTML
にメディアクエリを設定します。このメディアクエリは、画面幅がデザイン幅以上の場合に、.center
クラスの要素に特定のスタイル(幅とマージン)を適用します。 - 最後に、作成した
<style>
要素を<head>
に追加します。
- 新しい
結論
このコードは、デバイスの幅に応じてフォントサイズを調整し、特定のスタイルを適用することで、レスポンシブなデザインを実現しています。特に、デザイン幅を基準にしているため、デザインの整合性を保ちながら、さまざまなデバイスでの表示を最適化しています。
コメント
Hi, this is a comment.
To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
Commenter avatars come from Gravatar.