レスãƒãƒ³ã‚·ãƒ–デザインã®ãŸã‚ã« resize イベントを使ã†ã®ã¯ã‚„ã‚㦠matchMedia メソッドを使ãŠã† - ã²ã ã¾ã‚Šã‚½ã‚±ãƒƒãƒˆã¯å£Šã‚Œãªã„レスãƒãƒ³ã‚·ãƒ–デザインã®ãŸã‚ã« CSS メディアクエリを使ã†ã“ã¨ãŒå¤šã„ã¨æ€ã„ã¾ã™ã€‚ CSS å´ã ã‘ã§å®Œçµã—ãŸã‚‰ã„ã„ã®ã§ã™ãŒã€JavaScript å´ã§ã‚‚ç”»é¢ã‚µã‚¤ã‚ºã®å¤‰æ›´ã‚’検知ã—ãŸã‹ã£ãŸã‚Šã€ç”»é¢ã‚µã‚¤ã‚ºä»¥å¤–ã®ãƒ¡ãƒ‡ã‚£ã‚¢ã‚¯ã‚¨ãƒªç›¸å½“ã®ã“ã¨ã‚’ã—ãŸããªã£ãŸã‚Šã™ã‚‹ã“ã¨ã¯ã‚ã‚Šã¾ã™ã‚ˆã。 ç”»é¢ã‚µã‚¤ã‚ºã®å¤‰æ›´è‡ªä½“㯠window ã«ç™ºç”Ÿã™ã‚‹ resize イベント (window.onresize イベントãƒãƒ³ãƒ‰ãƒ©) ã§æ¤œçŸ¥ã§ãã¾ã™ãŒã€CSS メディアクエリã¨ã“れを組ã¿åˆã‚ã›ã¦ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–対応ã—よã†ã¨ã™ã‚‹ã¨ä»¥ä¸‹ã®å•é¡ŒãŒã§ã¦ãã¾ã™ã€‚ ウィンドウサイズ変更時㫠resize イベントãŒé«˜é »åº¦ã§ç™ºç”Ÿã™ã‚‹ã®ã§ã€resize イベントã®ãƒªã‚¹ãƒŠã§ã‚³ã‚¹ãƒˆã®ã‹ã‹ã‚‹å‡¦ç†ã‚’è¡Œã†ã®ã¯ã‚ˆããªã„ã¨ã•ã‚Œã‚‹ã€‚ (Throttling ã™ã‚‹ã“ã¨ãŒæŽ¨å¥¨ã•ã‚Œã‚‹ã€‚) å‚考 : resize | MDN CSS メディアクエリã¨å®Œå…¨ã«å¯¾å¿œã™ã‚‹ã‚‚ã®ã§ã¯ãªã„
Responsive Web Css
HTMLメール用ã®ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–テンプレート「Antwortã€:phpspot開発日誌
{{#tags}}- {{label}}
{{/tags}}