Question

我有一个div，点击它时显示屏幕左侧的图像，如下页中的示例所示 http://www.building58.com/examples/tabSlideOut.html

尽管在任何计算机屏幕上一切正常，但移动设备的情况并非如此。我该怎么做才能使其对移动设备做出响应？

 <div class="slide-out-div">
    <h3>title</h3>
    <br>
    <br>
    <br>
    <p>some text</p>           
 </div>

CSS：

.slide-out-div {
      padding-bottom: 10%;
      max-width: 419px;
      max-height: 414px;
      background-image: url('../images/envl2.png');
      border: 0px ;
      z-index: 99;
}  


.slide-out-div p {
      font-family: 'Century Gothic';
      font-size: large;
      color: black;
      position: relative;   
      top: 45px; /*[wherever you want it]*/
      left:100px; /*[wherever you want it]*/
      width: 250px; /* change to your preferences */
      overflow:hidden; /* older browsers */
      -webkit-transform: rotate(340deg);
      -moz-transform: rotate(340deg);
      -o-transform: rotate(340deg);
      writing-mode: lr-tb;     
}


.slide-out-div h3 {
         font-family: 'Century Gothic';
         font-size: 36px;
         color: black;
         text-align: left;
         text-decoration: bold; 
         position: relative;   
         top: 160px; /*[wherever you want it]*/
         left:50px; /*[wherever you want it]*/
         -webkit-transform: rotate(340deg);
         -moz-transform: rotate(340deg);
         -o-transform: rotate(340deg);
          writing-mode: lr-tb;
         }

我试图在jsfiddle上制作但是效果不好 http://jsfiddle.net/dnafdspa/

Answer 1

它在我的手机（iPhone 6）上播放得很好，虽然看起来你没有做太多让你的网站响应。 Google搜索＆＃34;响应式css教程＆＃34;将是你最好的朋友。

我看了第一个结果，似乎很好地涵盖了所有基础：http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

Div内容响应

1 个答案: