JavaScriptで自動調整ができる、レスポンシブデザイン E-code

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>に追加します。

動作の流れ

デザイン幅の取得:
- designWidth変数に、<head>からdesign-width属性の値を格納します。
フォントサイズの設定:
- font_size関数が呼び出され、引数としてデザイン幅が渡されます。
- _size内部関数が定義され、デバイスの幅（deviceWidth）を取得します。
- deviceWidthがデザイン幅以上の場合はデザイン幅に制限され、document.documentElement.style.fontSizeとしてフォントサイズが設定されます。
リサイズイベントの処理:
- ウィンドウがリサイズされるたびに、再度_size関数が呼ばれ、フォントサイズが更新されます。
メディアクエリの作成:
- 新しい<style>要素を作成し、media.innerHTMLにメディアクエリを設定します。このメディアクエリは、画面幅がデザイン幅以上の場合に、.centerクラスの要素に特定のスタイル（幅とマージン）を適用します。
- 最後に、作成した<style>要素を<head>に追加します。

結論

このコードは、デバイスの幅に応じてフォントサイズを調整し、特定のスタイルを適用することで、レスポンシブなデザインを実現しています。特に、デザイン幅を基準にしているため、デザインの整合性を保ちながら、さまざまなデバイスでの表示を最適化しています。

A WordPress Commenter より:

2024年8月29日 11:26 AM

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.

返信