방법

css에서 화면의 픽셀 수에 따라
스마트폰 헤더, PC헤더의 display:block, display:none을 전환한다.

scss

 /* パソコンで見たとき*/
 .pc-header { display: block !important; }
 .sma-header { display: none !important; }
 /* スマートフォンで見たとき*/
 @media only screen and (max-width: 750px) {
 .pc-header { display: none !important; }
 .sma-header { display: block !important; }
 }

haml

bootstra4 사용하고 있습니다.

    .container.p-0
      = link_to image_tag("/assets/images/sma-header.png", width: 'auto', alt: "なろう廃人のすすめ", class: "sma-header header-image container-fluid p-0"), root_path
      = link_to image_tag("/assets/images/pc-header.png", width: 'auto', alt: "なろう廃人のすすめ", class: "pc-header d-block container-fluid mx-auto p-0"), root_path

이미지 위치

이미지는 public 안에 넣는다.

/public/assets/images/sma-header.png
/public/assets/images/pc-header.png

모범 사례를 알고 싶습니다.

이 방법이라면 스마트 폰을 누워있을 때
제대로 이미지 표시되지만,
이마도키의 가장 좋은 방법은 무엇일까.

Reference

이 문제에 관하여(Rails에서 스마트 폰과 PC 헤더를 분리하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Kohei_Kishimoto0214/items/cd79c3288b746049e87f

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다