对所有移动分辨率响应 css

Question

我想为移动设备（纵向和横向视图）进行设计。我想在纵向视图时将宽度设为 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>

Answer 1

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

Answer 2

试试这个：

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

对所有移动分辨率响应 css

Responsive css for all mobile resolutions

css

responsive-design