Question

我想为移动设备制作设计（纵向和横向视图）。我想在视图为纵向时使宽度为100％，在视图为横向时为50％。

我知道使用媒体查询非常容易。但我无法解决所有设备的问题。有太多的分辨率，是否有任何特定的景观和人像视图？

＆＃13;

        .main_cont {overflow:hidden; position:fixed}
        .box1 {
        background:pink}
         .box2 {
        background:lightblue}



        @media screen and (max-width:640px) {
            .box1, .box2 {
            float:left; width:50%; }
        }

＆＃13;

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

＆＃13;

enter image description here

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

2 个答案: