フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

【爆速】HTML + Sass(SCSS)で簡単にレスポンシブ対応のLPを作ろう!

初めまして、初投稿!
まだまだ勉強中なので、徐々にクオリティを上げていけたらなと…
よろしくお願いします!!

レスポンシブで要素を正方形で維持するのって結構面倒だなーって、
一年前か半年前か…

PC表示の時は幅と高さ決めちゃえば良いんですがレスポンシブだと
デバイスの幅で正方形を維持できない問題、コーディング始めたての時はかなりつまずきました。

解決策が意外となかったので、共有がてら

$(window).load(function() {
  function img_rect() {
    var wt = $("li").css("width");
    $("li").css('height', wt);
  };
  $(window).resize(function() {
    img_rect();
  });
});

rectの縦横比をレスポンシブに合わせて調整してくれます。
要素のwidthを取って、heightに代入するといった感じです。

レスポンシブでインスタグラムやギャラリーなど見せるときおすすめです!

[紹介元] jQueryタグが付けられた新着記事 – Qiita 【爆速】HTML + Sass(SCSS)で簡単にレスポンシブ対応のLPを作ろう!

コメント

記事に戻る

コメントを残す