내 웹 사이트를 태블릿에서 작동시키는 방법은 무엇입니까?

Question

마침내 휴대 전화, 풍경 및 초상화에서 내 웹 사이트를 작업했지만 아직 태블릿에서 작동하지 않습니다.

내가 휴대 전화에 내 웹 사이트 작업을 만들기 위해 미디어 쿼리를 사용했습니다, 여기에 내가 무슨 짓을했는지 :

@media screen and (max-width: 1024px) { 
 
\t 
 
\t body{ 
 
\t \t position: relative; 
 
\t \t left: 100px; 
 
\t } 
 
\t .pintro{ 
 
\t \t position: relative; 
 
\t \t top: 180px; 
 
\t \t width: 500px; 
 
\t } 
 
\t .hintro{ 
 
\t \t position: relative; 
 
\t \t top: 180px; 
 
\t } 
 
\t 
 
    /* The rest of my code */ 
 
} 
 

 

 

 
@media screen and (max-width: 1024px) and (max-height: 400px) { 
 
\t body{ 
 
\t \t font-family: 'Noto Sans', sans-serif; 
 
\t \t background: url("nature-blur-tree-greenex.jpg") no-repeat center center fixed; 
 
\t \t width: 100%; \t 
 
\t \t max-width: 900px; 
 
\t \t margin: 0 auto; 
 
\t \t position: relative; 
 
\t \t right: 8%; 
 
\t } 
 
\t 
 
\t .pintro{ 
 
\t \t position: relative; 
 
\t \t line-height: 50px; \t \t 
 
\t \t left: -100px; 
 
\t } 
 

 
\t /* The rest of my code */ 
 
}

은 그때 일을 시도하는 정제와,이 양식 :

@media only screen and (min-device-width: 768px){ 
 
\t .footer{ 
 
\t \t position: reltive; 
 
\t \t top: 1000px; 
 
\t } 
 
}

하지만 작동하지 않았습니다. 누군가 내 CSS를 내 사이트에 넣고 태블릿에서 작업 할 수있는 미디어 쿼리를 제공하면 매우 감사 할 것입니다.

감사합니다. 사용

Answer 1

시도이 codepen

/* Smartphones (portrait and landscape) ----------- */ 
 
@media only screen 
 
and (min-device-width : 320px) 
 
and (max-device-width : 480px) { 
 
/* Styles */ 
 
} 
 

 
/* Smartphones (landscape) ----------- */ 
 
@media only screen 
 
and (min-width : 321px) { 
 
/* Styles */ 
 
} 
 

 
/* Smartphones (portrait) ----------- */ 
 
@media only screen 
 
and (max-width : 320px) { 
 
/* Styles */ 
 
} 
 

 
/* iPads (portrait and landscape) ----------- */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) { 
 
/* Styles */ 
 
} 
 

 
/* iPads (landscape) ----------- */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (orientation : landscape) { 
 
/* Styles */ 
 
} 
 

 
/* iPads (portrait) ----------- */ 
 
@media only screen 
 
and (min-device-width : 768px) 
 
and (max-device-width : 1024px) 
 
and (orientation : portrait) { 
 
/* Styles */ 
 
} 
 

 
/* Desktops and laptops ----------- */ 
 
@media only screen 
 
and (min-width : 1224px) { 
 
/* Styles */ 
 
} 
 

 
/* Large screens ----------- */ 
 
@media only screen 
 
and (min-width : 1824px) { 
 
/* Styles */ 
 
} 
 

 
/* iPhone 4 ----------- */ 
 
@media 
 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
 
only screen and (min-device-pixel-ratio : 1.5) { 
 
/* Styles */ 
 
} 
 
/* iPhone 6 landscape */ 
 
@media only screen and (min-device-width: 375px) 
 
    and (max-device-width: 667px) 
 
    and (orientation: landscape) 
 
    and (-webkit-min-device-pixel-ratio: 2) 
 
{ } 
 

 
/* iPhone 6 portrait */ 
 
@media only screen 
 
    and (min-device-width: 375px) 
 
    and (max-device-width: 667px) 
 
    and (orientation: portrait) 
 
    and (-webkit-min-device-pixel-ratio: 2) 
 
{ } 
 

 
/* iPhone 6 Plus landscape */ 
 
@media only screen 
 
    and (min-device-width: 414px) 
 
    and (max-device-width: 736px) 
 
    and (orientation: landscape) 
 
    and (-webkit-min-device-pixel-ratio: 3) 
 
{ } 
 

 
/* iPhone 6 Plus portrait */ 
 
@media only screen 
 
    and (min-device-width: 414px) 
 
    and (max-device-width: 736px) 
 
    and (orientation: portrait) 
 
    and (-webkit-min-device-pixel-ratio: 3) 
 
{ } 
 

 
/* iPhone 6 and 6 Plus */ 
 
@media only screen 
 
    and (max-device-width: 640px), 
 
    only screen and (max-device-width: 667px), 
 
    only screen and (max-width: 480px) 
 
{ } 
 

 
/* Apple Watch */ 
 
@media 
 
    (max-device-width: 42mm) 
 
    and (min-device-width: 38mm) 
 
{ }