2
ブログのページをデザインしています。ページには固定位置のサイドバーがあり、コンテンツの中心にあるdivがあります。あなたはそれを見ることができますhere。ここに私のCSSです：Divsのサイズを携帯端末で小さすぎないように表示するにはどうすればよいですか？
.container {
width: 100%;
height: 100%;
text-align: center;
}
.sidebar {
position: fixed;
left: 0px;
top: 10%;
height: 80vh;
width: 10%;
background-color: red;
}
.content {
width: 40%;
display: inline-block;
text-align: justify;
}<body>
<div class="container">
<div class="sidebar">
THis is the sidebar.
</div>
<div class="content">
<h1>Fourth</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sapien vel augue auctor tempor. Duis orci velit, congue at ornare non, tincidunt quis sapien. Nam at fringilla tortor. Fusce non pharetra quam. Vestibulum fermentum facilisis urna
sed consequat. Nam rutrum sapien at facilisis porttitor. Fusce vehicula dignissim nisl, vel cursus lorem mattis ut. Sed eros libero, euismod et ligula sed, rutrum varius libero. Nulla eget sem sit amet velit pretium porttitor. Morbi tempus ultrices
urna, in egestas erat cursus ut. In hac habitasse platea dictumst.</p>
<p>Donec efficitur gravida pellentesque. Curabitur dignissim odio at tempus fermentum. Aenean pharetra sed sem sed convallis. Praesent pretium urna sit amet leo porttitor, eu auctor purus consequat. Donec id velit eleifend, fringilla enim vitae, blandit
lacus. Nulla tincidunt sed lacus ac euismod. Nam non blandit diam.</p>
<p>Vivamus hendrerit ex a orci dapibus convallis. Vivamus dictum maximus purus, in condimentum massa molestie ut. Donec aliquet, augue ut consequat consectetur, velit turpis finibus elit, sed porta dui felis sed massa. Nulla aliquam interdum est eget
ornare. Suspendisse cursus nec lorem eu rhoncus. Curabitur vehicula pellentesque egestas. Proin et commodo purus. Nulla malesuada consequat tortor, interdum volutpat est congue sed. Curabitur vitae placerat lacus, vestibulum lacinia mi. Duis auctor
malesuada lacus id consectetur. Etiam venenatis nisi eget tellus accumsan, vel ornare mi porttitor. Curabitur dictum non tortor et laoreet.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent egestas quam orci, et eleifend lectus lobortis vel. Nullam pulvinar porttitor egestas. Phasellus consectetur felis eget erat iaculis pulvinar
in sit amet sapien. Nulla sollicitudin maximus nulla, nec ullamcorper arcu tempor at. Aliquam at nisl massa. Sed eleifend urna sit amet erat semper, ac aliquam quam imperdiet. Ut nec cursus nisl. Quisque feugiat imperdiet tellus sed aliquam. Nulla
magna velit, interdum nec auctor vitae, congue at augue. Phasellus placerat risus et vehicula efficitur. Etiam hendrerit egestas interdum. Nulla placerat fringilla mi et rhoncus. Fusce porttitor, arcu consectetur finibus porta, mi ante ultrices
tellus, nec vulputate diam leo quis tellus. Fusce aliquam nulla vel sem tempus, non elementum est condimentum. Nunc accumsan libero diam, ut varius nibh dapibus luctus.</p>
<p>Integer vitae tempor velit. Sed convallis sed dolor id pulvinar. Donec nisi nisl, accumsan quis ante in, tempor dapibus metus. Mauris sed libero consequat, pellentesque sapien ac, tristique felis. Nullam et justo varius, fringilla tellus non, egestas
justo. Morbi sodales libero orci, id viverra nulla lobortis iaculis. In hac habitasse platea dictumst. Pellentesque rutrum sollicitudin augue, nec laoreet dolor mattis non. Mauris non urna ligula. Donec vel velit libero. Sed elit arcu, bibendum
non consectetur eu, varius ut lacus. Fusce commodo nunc ut molestie blandit. In scelerisque suscipit metus, at suscipit felis porta in. Morbi porttitor dapibus malesuada. Fusce vel elit aliquet, convallis nulla eget, ultricies metus.</p>
</div>
</div>
<br/>
<p><em>This is the footer</em>
</p>
</body>現在、すべての幅がパーセンテージです。私はコンテンツがページの全幅にわたることは望ましくありません（読みやすくするため）。しかし、モバイルデバイス（または画面の幅が十分に小さい場合）では、コンテンツをページ全体に広げたいと思っています。しかし、％幅では、コンテンツ幅はページ幅とともに常に変化します。コンピュータの画面では問題ありませんが、幅が狭い場合はコンテンツの幅が狭くなります。
例は、ウェブサイトmediumです。ウィンドウのサイズを変更すると、幅が広い場合はコンテンツの幅は変わりませんが、幅が小さい場合はコンテンツがページ全体に広がります。
どのようにそれを達成するためのアイデアですか？
私はあなたがイースリー – Math
使用メディアは – Johannes