Question

我有一个html页面，该页面的位置带有文本：固定，垂直的联系人在页面的右侧，例如FB instagram和email（位置也固定），并且在这些页面上滚动了一些图像。我在修正右侧的文本和联系人之间的响应式交互时遇到一些问题，当页面被拉伸或从移动设备查看页面时，我需要有关行为的帮助，我尝试使用引导媒体查询，但是遇到麻烦。如您所见，具有多种设备或页面尺寸的文本的位置和行为存在问题

        body{
            overflow-x: hidden;
            font-weight: 535;
            position: relative;}
        
        .small-container{
                min-height: 100vh;
                margin: 0;
                padding: 0;
                padding-left: -10% }
 

        div.row{
              position: fixed;
              width: 100%;}
             
        
       #vertical {
        position: fixed;
        top: 0;
        bottom: 0;
        
        left: calc(100% - 48px);}

       .wrapper {
                position: absolute;
                
                transform: rotate(90deg) translate(0, 10px);
                transform-origin: left bottom;
                width: 100vh;
                top: 100px;
                padding-right:10px;
            }
                


       a.contact{
                padding-right: 1em;
                margin-top: 10px;
                font-size:2.7vw;
                color: black;
                text-decoration: none;
                /*margin: 2px;*/
            }

            

        
        
        img {
            height: 65vh;
            width: auto;
            left: 50%;
            transform: translateX(-50%);
            transform: translateY(100px);
            display: block;
           
            margin: 200px auto; }
       

       #testo {
            list-style-type: none;
            font-size: 60px;
            font-size:4vw;
            font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            line-height: 1.7;
            color: black;
            top: 0;
            padding-left: 50px;
            margin-top: 200px;
            width: 100%;
            text-align: left;}
        
   
        @media (min-width: 576px) and (max-width: 767.98px) { ... }

            
        @media (min-width: 768px) {

        }

        @media (min-width: 992px) {}

        @media (min-width: 1200px) {}

        @media (min-width: 1500px) {
            div.col-md-10{transform: translateX(-10%);}
        }
        @media (min-width: 1600px) {
            div.col-md-10{transform: translateX(-15%);}
        }
        @media (min-width: 1919px) {
            a.contact{transform: translateY(-10px);}
            div.col-md-10{transform: translateX(-18%);

            
         }
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no shrink-to-fit=no">
    <title>Cor</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style3.css">
</head>

<body>
   <div class="container">
  <div class="container small-container">
  <div class="row">
        <div class="col-md-10">
              <p id="testo">
                Cor is an Italian artist based in Belgium.<br>
                Cor is both analogic and digital<br>
                Cor looks towards vernacular, surrealist<br>
                and pop culture.<br>
             </p>
       </div>
  </div>
</div>
<div id="vertical"> 
  <div class="wrapper">
    <a class="contact" href="#">INSTAGRAM</a>
    <a class="contact" href="#">EMAIL</a>
    <a class="contact" href="#">CREDITS</a>
  </div>      
</div>
</div>


   

  
    <section class="gallery">
        <img src="http://juliecristobal.com/wp-content/uploads/2018/11/20180601_Emma_09_0509-copie.jpg" alt="image">
        <img src="http://juliecristobal.com/wp-content/uploads/2018/11/20180701_Schon__010127.jpg" alt="image">
        <img src="http://juliecristobal.com/wp-content/uploads/2018/11/SK_FW18_ADDITIONALPIC_06_WEB.jpg" alt="image">
        <img src="http://juliecristobal.com/wp-content/uploads/2018/11/20180415_Elodie_05_1176-2-copie-1.jpg" alt="image">
    </section>
 

</body>

</html>

元素之间的响应式交互

0 个答案: