オンラインの教材で学ぶ時は、widthを指定の数値で設定するケースが多いかと思います。
私もそうしており、手っ取り早く、すっきりかけるのでそうしていました。
デザインカンプなどを見て、全体の横幅(width) 1280px 要素の横幅(width)が800pxの場合、width: 800pxを指定していました。その幅(1280px)であればいいのですが、 レスポンシブでタブレットやスマートホンサイズにしていく場合、途中で要素が破綻してしまいます。
端に寄ってしまったり、中の文字が不恰好になってしまったりします。悩んでいると％で指定するといいよと教えてもらいました。親要素 1280pxに対して、800pxだから
width: 62.5%;
上記を設定すると親要素の幅が縮まった時、例えば 1000pxになった時、要素は625px,割合を保ったまま縮まっていきます。必ずしも％にするわけではないようですが、大きな気づきになりました。
