모바일보기에서만 div 태그를 숨기시겠습니까?

모바일보기에서만 div 태그를 숨기시겠습니까?

---

사이트의 유동적 인 레이아웃을 만들고 있습니다. 모바일보기에서 하나 <div>또는 전체 <div>자체 의 내용을 숨기려고 하지만 태블릿 및 데스크톱보기에서는 숨기려고합니다 .

내가 지금까지 가지고있는 것은 ...

#title_message {
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
}

모바일 레이아웃에 대해 디스플레이를 '없음'으로 설정하고 태블릿 / 데스크톱 레이아웃에서 차단으로 설정했습니다 ... 더 쉬운 방법이 있습니까?

---

두 가지가 필요합니다. 첫 번째는 @media screen반응 형 디자인에 사용되는 특정 화면 크기에서 특정 코드를 활성화하는 것입니다. 두 번째는 visibility: hidden속성 의 사용입니다 . 브라우저 / 화면이 600 픽셀에 도달하면 #title_message숨겨집니다.

@media screen and (max-width: 600px) {
  #title_message {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}

편집 : 모바일 또 다른 CSS를 사용하는 경우 다음 단지를 추가 visibility: hidden;로 #title_message. 도움이 되었기를 바랍니다.

---

display 속성을 none기본값으로 설정 한 다음 브라우저가 특정 너비에 도달하면 미디어 쿼리를 사용하여 원하는 스타일을 div에 적용합니다. 768px미디어 쿼리에서 div가 표시되어야하는 최소 px 값으로 바꿉니다 .

#title_message {
    display: none;
}

@media screen and (min-width: 768px) {
    #title_message {
        clear: both;
        display: block;
        float: left;
        margin: 10px auto 5px 20px;
        width: 28%;
    }
}

---

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { #title_message { display: none; }}

이것은 특히 아이폰 화면을위한 단일 페이지가있는 반응 형 디자인을위한 것입니다. 실제로 다른 모바일 페이지로 라우팅하고 있습니까?

---

이 예에 따라 안내 할 수 있습니다. css 파일에서 :

.deskContent {
    background-image: url(../img/big-pic.png);
    width: 100%;
    height: 400px;
    background-repeat: no-repeat;
    background-size: contain; 
}

.phoneContent {
    background-image: url(../img/small-pic.png);
    width: 100%;
    height: 100px;
    background-repeat: no-repeat;
    background-size: contain;
}

@media all and (max-width: 959px) {
    .deskContent {display:block;}
    .phoneContent {display:none;}
}

@media all and (max-width: 479px) {
    .deskContent {display:none;}
    .phoneContent {display:block;}
}

HTML 파일에서 :

<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>

---

주어진 솔루션은 데스크톱에서 작동하지 않았으며 모바일 div 만 표시되었지만 두 div 만 표시되었습니다. 그래서 저는 약간의 검색을했고 최소 너비 옵션을 찾았습니다. 내 코드를 다음과 같이 업데이트했으며 이제 정상적으로 작동합니다. :)

CSS :

    @media all and (min-width: 480px) {
    .deskContent {display:block;}
    .phoneContent {display:none;}
}

@media all and (max-width: 479px) {
    .deskContent {display:none;}
    .phoneContent {display:block;}
}

HTML :

<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>

---

방금 위치를 바꾸고 나를 위해 일했습니다 (모바일 만 표시)

<style>
 .MobileContent {

     display: none;
	 text-align:center;

 }

@media screen and (max-width: 768px) {

 .MobileContent {

     display:block;

 }

}
</style>
<div class="MobileContent"> Something </div>

---

이 시도

@media handheld{
    #title_message { display: none; }
}

ReferenceURL : https://stackoverflow.com/questions/16550485/hide-div-tag-on-mobile-view-only