모든 모바일 해상도에 대한 반응 형 CSS

-2

휴대 기기 용 디자인을 만들고 싶습니다 (세로 및 가로보기). 보기가 세로 일 때 너비를 100 %로 만들고보기가 가로 일 때 너비를 50 %로 만들고 싶습니다.모든 모바일 해상도에 대한 반응 형 CSS

나는 매우 쉬운 미디어 쿼리를 사용합니다. 그러나 모든 장치에서이 문제를 해결할 수는 없습니다. 이렇게 많은 해결책이 있습니다, 거기에 풍경과 초상화보기에 대한 특정 CSS가 무엇입니까?

 .main_cont {overflow:hidden; position:fixed} 
 
     .box1 { 
 
     background:pink} 
 
     .box2 { 
 
     background:lightblue} 
 

 

 

 
     @media screen and (max-width:640px) { 
 
      .box1, .box2 { 
 
      float:left; width:50%; } 
 
     }

<div class="main_cont"> 
 

 
     <div class="box1"> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 

 
     </div> 
 

 
     <div class="box2"> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 

 
     </div> 
 

 
    </div>

enter image description here

출처

2015-01-23 anji

무슨 문제? 지금 작동하지 않는 것은 무엇입니까? – atmd

잘 작동하지만, 모든 모바일 초상화보기 div에서 100 %와 가로보기 div가되어야합니다. 50 % – anji

가능한 복제본 [모바일 대응 디자인을 만드는 데 사용할 가장 중요한 미디어 쿼리는 무엇입니까?] (http : //stackoverflow.com/questions/12045893/which-are-the-most-important-media-queries-to-use-in-creating-mobile-responsive) – BiscuitBaker

이 시도 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 


<style> 



    .box1{ 

     background:#FFC0CB; 

     width:50%; 
     float:left; 

     } 
    .box2{ 

     background:#ADD8E6; 

     width:50%; 
     float:left; 

     } 


/*Portrait Tablet*/ 
@media only screen and(min-width: 481px) and (max-width: 768px)and (orientation:Portrait){ 

     .box1{ 
     width:100%; 


     } 

    .box2{ 
     width:100%; 


     } 

    } 

/*Landscape smart phone*/ 
@media only screen and (min-width: 321px) and (max-width: 480px)and (orientation:landscape){ 
     /* Styles */ 
    .box1{ 
     width:50%; 
     float:left; 

     } 
    .box2{ 
     width:50%; 
     float:left; 

     } 
    } 

/*Portrait smart phone*/ 
@media only screen and(max-width: 320px)and (orientation:Portrait){ 

    .box1{ 
     width:100%; 


     } 

    .box2{ 
     width:100%; 


     } 

    } 
</style> 
</head> 

<body> 


    <div class="box1"> 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
    </div> 
    <div class="box2"> 

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
    </div> 



</body> 
</html>

출처

2015-01-23 10:08:05 user3176335

감사합니다. – anji

@media all and (orientation:portrait) {.box1{width:100%} .box2{width:100%}} 
@media all and (orientation:landscape) { .box1{width:50%} .box2{width:50%} }

출처

2015-01-23 10:05:05 anji

이 답변에 몇 가지 설명을 추가하십시오. 그것이 지금 서서, 그것은 삭제되는 변화를 의미합니다. –

모든 모바일 해상도에 대한 반응 형 CSS

답변

관련 문제