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.