[CSS]スマホã§è¦ç´ を高ã•ã„ã£ã±ã„ã«è¡¨ç¤ºã—ãŸã„ã®ã«ã€æœŸå¾…通りã«è¡¨ç¤ºã•ã‚Œãªã„時ã®è§£æ±ºæ–¹æ³•ãƒ“ューãƒãƒ¼ãƒˆã‚’使ã£ãŸå˜ä½ï¼ˆvw, vhãªã©ï¼‰ã¯ã€ç‰¹ã«ã‚¹ãƒžãƒ›ã®å„ブラウザã«ãŠã„ã¦è¤‡é›‘ã§ã™ã€‚例ãˆã°ã€vwã®ã‚¹ã‚¯ãƒãƒ¼ãƒ«ãƒãƒ¼ã‚’考慮ã™ã‚‹å¿…è¦ãŒã‚ã‚Šã¾ã™ã‹ï¼Ÿ サイトã®ãƒŠãƒ“ゲーションやページコントãƒãƒ¼ãƒ«ã¯ã©ã†ã§ã—ょã†ã‹ï¼Ÿ ãれらã¯è¨ˆç®—ã«å«ã¾ã‚Œã¾ã™ã‹ï¼Ÿ スマホã§è¦ç´ をビューãƒãƒ¼ãƒˆã®é«˜ã•ã„ã£ã±ã„ã«è¡¨ç¤ºã—ãŸã„ã®ã«ã€æœŸå¾…通りã«è¡¨ç¤ºã•ã‚Œãªã„時ã®è§£æ±ºæ–¹æ³•ã‚’紹介ã—ã¾ã™ã€‚ The trick to viewport units on mobile 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ※当ブãƒã‚°ã§ã®ç¿»è¨³è¨˜äº‹ã¯ã€å…ƒã‚µã‚¤ãƒˆæ§˜ã«ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã‚’å¾—ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ ビューãƒãƒ¼ãƒˆã®é«˜ã•ï¼ˆvh）ã®ä»•æ§˜ 高ã•ã„ã£ã±ã„ã®è¦ç´ を表示ã™ã‚‹æ–¹æ³• ビューãƒãƒ¼ãƒˆã®ãƒªã‚µã‚¤ã‚ºã«ã‚‚対応ã™ã‚‹ ビューãƒãƒ¼ãƒˆã®é«˜ã•ï¼ˆvh）ã®ä»•æ§˜ W3Cã®ä»•æ§˜ã§ã¯ã€ãƒ“ューãƒãƒ¼ãƒˆã®å˜ä½ã‚’ã©ã®ã‚ˆã†ã«è¨ˆç®—ã™ã‚‹ã‹ã¯æ¼ 然ã¨ã—ã¦ã„ã¾ã™ã€‚スマホã§ã¯é«˜ã•ãŒé‡è¦ã«ãªã‚‹ã“ã¨ãŒå¤šã„ã®ã§ã€ãƒ“ューãƒãƒ¼
![[CSS]スマホã§è¦ç´ を高ã•ã„ã£ã±ã„ã«è¡¨ç¤ºã—ãŸã„ã®ã«ã€æœŸå¾…通りã«è¡¨ç¤ºã•ã‚Œãªã„時ã®è§£æ±ºæ–¹æ³•](https://cdn-ak-scissors.b.st-hatena.com/image/square/8a5cf0a3bb9540d4d9f77cfb193ce39e28e90836/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080401-02.png)
モãƒã‚¤ãƒ«ã‚¢ãƒ—リ開発環境ã®ãŸã‚ã®ãƒ•ã‚§ãƒ¼ã‚ºåˆ¥ãƒã‚§ãƒƒã‚¯ãƒªã‚¹ãƒˆ - Speee DEVELOPER BLOG
{{#tags}}- {{label}}
{{/tags}}