适用于所有移动分辨率的响应式 css答案

【问题标题】：Responsive css for all mobile resolutions适用于所有移动分辨率的响应式 css
【发布时间】：2015-03-22 07:40:11
【问题描述】：

我想为移动设备进行设计（纵向和横向视图）。当视图为纵向时，我想将宽度设为 100%，当视图为横向时设为 50%。

我知道使用媒体查询非常容易。但我无法为所有设备解决此问题。分辨率这么多，横向和纵向视图有什么特定的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>

【问题讨论】：

有什么问题吗？现在什么不工作？
它工作正常，但我想做到，在所有移动纵向视图 div 应该是 100% 和横向视图 div 50%
Which are the most important media queries to use in creating mobile responsive design?的可能重复

标签： css responsive-design

【解决方案1】：

试试这个：

  <!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>

【讨论】：

【解决方案2】：

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

【讨论】：

请对此答案添加一些解释。就目前而言，它代表着被删除的变化。