Kích thước phông chữ có thể là% kích thước vùng chứa trong css/css3 không?

Tôi có một container:Kích thước phông chữ có thể là% kích thước vùng chứa trong css/css3 không?

<div id="container"><h1>LONG TITLE LINE</h1></div>

và css:

#container { 
    width: 50%; 
    height: 50%; 
} 

#container h1 { 
    font-size: XXXXXX; 
}

"XXXXXX" < - nơi mà tôi muốn kích thước phông chữ được dựa trên chiều rộng của trang/container.

CÂU HỎI: có thể có kích thước phông chữ của h1 dựa trên chiều rộng của trang không? trong css3? Tôi chắc chắn nó có thể được thực hiện bằng cách sử dụng JS, nhưng muốn tránh điều đó nếu có thể.

Nguồn

2012-01-26 circusdei

Tôi không nghĩ rằng nó có thể trong CSS, nhưng điều này có thể là thú vị cho bạn:

http://fittextjs.com/

Nguồn

2012-01-26 16:30:38

ohh - đẹp quá. kiểm tra xem nó hoạt động như thế nào. – circusdei

có vẻ tốt với tôi - cảm ơn vì liên kết! Bây giờ lên hình nền:/ – circusdei

Không phải cách bạn đang nói. Tuy nhiên, bạn có thể làm ngược lại. Có chiều rộng của trang phụ thuộc vào kích thước phông chữ, nếu bạn khai báo kích thước phông chữ cơ sở bằng ems, sau đó sử dụng giá trị em cho bố cục của bạn. Sau đó, chiều rộng sẽ tăng lên nếu bạn tăng kích thước của văn bản.

Nguồn

2012-01-26 16:21:15

Và sau đó bạn có thể thiết lập các khung nhìn dựa trên kích thước trang render. – circusdei

Tôi không thấy tại sao điều này không thể được thực hiện sử dụng các thẻ media. Tùy thuộc vào mức độ chi tiết mà bạn muốn tạo, bạn có thể làm như sau:

@media only screen and (min-width: 1000px){ 
    #container h1 { font-size:42px; } 
} 
@media only screen and (max-width: 1000px){ 
    #container h1 { font-size:40px; } 
} 
@media only screen and (max-width: 900px){ 
    #container h1 { font-size:35px; } 
} 
@media only screen and (max-width: 800px){ 
    #container h1 { font-size:30px; } 
} 
@media only screen and (max-width: 700px){ 
    #container h1 { font-size:25px; } 
} 
@media only screen and (max-width: 600px){ 
    #container h1 { font-size:20px; } 
} 
@media only screen and (max-width: 500px){ 
    #container h1 { font-size:15px; } 
}

Xem JSFiddle here để xem thử.

Nguồn

2014-03-10 14:34:20 adamdport

Một lựa chọn dependng khác trên bố trí của bạn là sử dụng vw đơn vị:

vw:. 1/100th của chiều rộng của khung nhìn (source MDN)

Nếu chiều rộng #container của bạn được đặt dưới dạng phần trăm của chế độ xem, kích thước phông chữ sẽ thích ứng với chiều rộng của nó:

DEMO

CSS:

#container h1 { 
    font-size: 5vw; 
}

Trình duyệt hỗ trợ cho các đơn vị vw là IE9 +, xem canIuse để biết thêm.

Nguồn

2014-07-19 09:02:33

Đây phải là câu trả lời được chấp nhận, nó thực hiện chính xác những gì OP yêu cầu mà không cần bổ sung. – adamdport

Chính xác những gì tôi cần mà không cần bất kỳ plugin nào! – Sushant

Đây không phải là những gì OP đã yêu cầu. đơn vị khung nhìn tỷ lệ với chế độ xem (do đó tên của chúng). Những gì OP (và rất có thể là nhiều người khác) đang tìm kiếm là mở rộng quy mô dựa trên một container. Hai điều hoàn toàn khác nhau –

Giải pháp của tôi tạo biến CSS thể hiện chiều cao của vùng chứa tương ứng với chế độ xem, trong đơn vị "vh", biến này sau đó có thể được sử dụng với hàm "calc" CSS3 để tính chiều cao của phông chữ theo phần trăm của chiều cao của container.

kích thước của container được đo mỗi khi khung nhìn (cửa sổ) được thay đổi kích cỡ

<html> 
     <head> 
      <style> 
       .container { 
        width:100%; 
        /* 
         any rules you like to set the dimensions of the container 
        */ 
        top:40px; 
        height:30vh; 

        border:1px solid red; 
        white-space:nowrap; 
       } 
      </style> 
      <script> 
        function setCSSVariableAccordingToElementHeightRelativeToViewPort(elementClassName, cssVariableName, immutableElement) 
        { 
         var element 
         /* 
          the "immutableElement" parameter is 
           true when the container is never recreated, 
           false if its generated dynamicaly 
         */ 
         if(immutableElement === true) { 
          element = document.querySelector("." + elementClassName) 
         }     

         var onResize = function() { 
          if(immutableElement !== true) { 
           element = document.querySelector("." + elementClassName) 
          } 

          if(element != undefined) { 
           var elementHeight = element.offsetHeight 
           var elementVH = (elementHeight/window.innerHeight) * 100 
           element.style.setProperty(cssVariableName, elementVH + "vh") 
          } 
         } 
         onResize() 
         window.onresize = onResize 
        } 
      </script> 
     </head> 
     <body> 
      <div class="container"> 
       <span style="font-size:calc(var(--container-vh) * 0.25)">25%</span> 
       <span style="font-size:calc(var(--container-vh) * 0.50)">50%</span> 
       <span style="font-size:calc(var(--container-vh) * 1.00)">100%</span> 
      </div> 
     </body> 

     <script> 
      setCSSVariableAccordingToElementHeightRelativeToViewPort("container", "--container-vh", true) 
     </script> 
    </html>

JSFiddle

Nguồn

2017-04-19 23:33:58

Kích thước phông chữ có thể là% kích thước vùng chứa trong css/css3 không?

Trả lời

Các vấn đề liên quan