适用于所有移动分辨率的响应式CSS

debugcn 发表于 Dev

anji

我想为移动设备设计一个（人像和风景视图）。我想在视图为纵向时将宽度设置为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>

在此处输入图片说明

用户名

试试这个：

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