排版（字母）的某些部分響應窗口的寬度/高度？

我不確定這樣的事情是否可以通過CSS實現，但是這個社區中有才華的人再次證明我錯了很多次，所以我們開始吧！排版（字母）的某些部分響應窗口的寬度/高度？

我在想，如果有可能的字母Ø，ü的一定水平的部分，ē可以同時保持其位置與窗的寬度與應對呢？在下面的圖片中，我已經繪製了響應式印刷如何對窗口比例作出反應。請注意，設置類型放置在一個頁面包裝中，並垂直放置在窗口的中間。

enter image description here

我怎麼可能做到這一點？我應該使用什麼樣的格式（svg，shapes等）

謝謝你提前！

2014-11-21 kenhimself

這是一個'SVG'和'CSS'的混合體，對此我保證。 – 2014-11-21 22:54:41

嗨@JoshBurgess - 你能提出我該如何實現這個目標？我知道如何製作SVG並將它們轉化爲點，以便html不必調用SVG，但是您是否知道如何使響應（以藍色標記）以某種方式與非響應部分文本（標記爲綠色？） – kenhimself 2014-11-21 22:57:12

您可以簡單地通過在裁剪div中使用疊加的div：擴展字母形狀使用SVG創建，右側浮動並隱藏在左側div下面。當用戶調整窗口大小時，右側的div滑出顯示細長部分。 – 2014-11-22 23:02:59

您可以通過只具有溢出一個div內覆蓋元素做簡單的伸展字母形狀用SVG創建，並隱藏在左側divs下面。當用戶調整窗口大小時，右側的div滑出顯示細長部分。例如。

<div id="clipper"> 
<svg id="leftpart" x="0px" y="0px" width="30px" height="150px"> 
    <rect x="0" y="0" width="30" height="150" fill="red"/> 
</svg> 

<svg id="rightpart" x="0px" y="0px" width="2000px" height="150px"> 

    <rect x="0" y="0" width="2000" height="30" fill="black"/> 
    <rect x="0" y="60" width="2000" height="30" fill="black"/> 
    <rect x="0" y="120" width="2000" height="30" fill="black"/> 
</svg> 
</div> 


#clipper{ 
    position: absolute; 
    top:200px; 
    left:200px; 
    width:40%; 
    overflow: hidden; 

} 

#rightpart { 
    position: relative; 
    z-index:1; 
} 

#leftpart { 
    position: absolute; 
    z-index:2; 

}

來源

2014-11-24 01:54:49

你，@Michael Mullany，是一位flip'n天才。這樣一個簡單的解決方案 - 我絕對想到這一點。我改變了，並添加了幾行代碼，並得到**完全**我需要的。非常感謝，你搖滾！我已將您的解決方案標記爲答案。 – kenhimself 2014-11-24 02:23:36

以下是基於屏幕寬度縮放SVG元素的示例。這取決於有一種方法來選擇你要修改的字符元素（例如，U碗的底部）。在這個例子中，矩形元素具有唯一的ID。

HTML：

<svg version="1.1" 
    baseProfile="full" 
    width="200" height="200" 
    xmlns="http://www.w3.org/2000/svg"> 

    <rect id="foo" height="100" width="100" /> 

</svg>

CSS：隱藏：

#foo { 
    fill: #f00; 
    transform: scaleX(0.5); 
} 

@media only screen and (min-width: 500px) { 
    #foo { 
     transform: scaleX(2); 
    } 
}

http://jsfiddle.net/bangarang/tgcw1fop/

來源

2014-11-22 17:44:44

排版（字母）的某些部分響應窗口的寬度/高度？

回答

相關問題