今日の実務で使ったレスポンシブのやり方。
今日の実務でだいぶ使い方がわかってきた。とりあえず、レスポンシブにした時のやりたいことを書いていけばいいとのこと。
max-widthを指定して、あとは中にそれぞれのクラスで対応したいことを書いていくだけ。
<style>
@media only screen and (max-width: 768px){
#main {
float: none;
width: 100%;
padding: 0 10px;
margin-left: 0;
}
img {
max-width: 100%; /* 画像の最大幅を親要素に合わせる */
height: auto; /* アスペクト比を維持したまま高さを自動調整 */
}
.btn {
margin-bottom:20px;
}
}
</style>
@include('layouts.side')
@include('layouts.guide')
@include('layouts.footer')