こちらにソースコードがあります。
概要は、画面いっぱいに数字の列を並べたものを表示するのが目的です。
しかしながら、CSSにてhtml、bodyに対して、font-sizeを倍にすると、一部がはみ出して見れなくなります。
こちらのディスプレイはFull HD(1920x1080)です。
やりたいことは、font-sizeを倍にして、2倍にならなくとも、画面からはみ出さない範囲まで大きくするということができないかと考えております。また、ブラウザのサイズを変えたときもフォントのサイズが自動で変わればと考えております。
少しむずかしい条件をつけたいと思うのですが、javascriptを使わずにページ表示できれば…と考えております。
わかる方がおられましたら、よろしくおねがいします。
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<style> 5html, body { 6 margin: 0; 7 padding: 0; 8 border: none; 9 width: 100%; 10 height: 100%; 11 overflow: hidden; 12 font-size: 100px; 13} 14 15.fb_container { 16 display: flex; 17 align-items: center; 18 justify-content: center; 19 width: 100vw; 20 height: 100%; 21} 22</style> 23</head> 24<body> 25 26 <div class="fb_container"> 27 <table> 28 <tr> 29 <td>1111111111111111111111111111111111111</td> 30 </tr> 31 <tr> 32 <td>2222222222222222222222222222222222222</td> 33 </tr> 34 <tr> 35 <td>3333333333333333333333333333333333333</td> 36 </tr> 37 <tr> 38 <td>4444444444444444444444444444444444444</td> 39 </tr> 40 <tr> 41 <td>5555555555555555555555555555555555555</td> 42 </tr> 43 <tr> 44 <td>6666666666666666666666666666666666666</td> 45 </tr> 46 <tr> 47 <td>7777777777777777777777777777777777777</td> 48 </tr> 49 <tr> 50 <td>8888888888888888888888888888888888888</td> 51 </tr> 52 <tr> 53 <td>9999999999999999999999999999999999999</td> 54 </tr> 55 <tr> 56 <td>0000000000000000000000000000000000000</td> 57 </tr> 58 </table> 59 </div> 60 61</body> 62</html>
HTML
1html, body { 2 font-size: 200px;/*に変更すると一部が表示されなくなる*/ 3} 4 5
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/04 14:20
2019/12/04 18:26
2019/12/12 03:52
2019/12/12 04:04