OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 | |
5 <meta name="viewport" content="width=800"> | 4 <meta name="viewport" content="width=800"> |
6 <style> | 5 <style> |
7 html { font-size: 16px; } | 6 html { font-size: 16px; } |
8 body { width: 800px; margin: 0; overflow-y: hidden; } | 7 body { width: 800px; margin: 0; overflow-y: hidden; } |
| 8 ul { list-style: none; padding-left: 0; } |
9 </style> | 9 </style> |
10 | |
11 </head> | 10 </head> |
12 <body> | 11 <body> |
13 | 12 <ul style="width: 400px;"> |
14 <ul style="width: 400px; -webkit-margin-start: 3px"> | |
15 <li style="width: 600px; font-size: 1.25rem"> | 13 <li style="width: 600px; font-size: 1.25rem"> |
16 This element is only autosized to 20px computed font size (16 *
400/320), since we don't want list items to be autosized differently from each o
ther, and the width of UL tag is used for autosizing.<br> | 14 This element is only autosized to 20px computed font size (16 *
400/320), since we don't want list items to be autosized differently from each o
ther, and the width of UL tag is used for autosizing.<br> |
17 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. | 15 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. |
18 </li> | 16 </li> |
19 <li style="font-size: 1.25rem"> | 17 <li style="font-size: 1.25rem"> |
20 This element is autosized to computed font size of 20px similarl
y to the first list item.<br> | 18 This element is autosized to computed font size of 20px similarl
y to the first list item.<br> |
21 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. | 19 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. |
22 </li> | 20 </li> |
23 <li style="float: left; width: 800px; font-size: 2.5rem"> | 21 <li style="float: left; width: 800px; font-size: 2.5rem"> |
24 This list element becomes a separate autosizing cluster since it
's floating. Hence its computed font size is 40px (16 * 800 / 320).<br> | 22 This list element becomes a separate autosizing cluster since it
's floating. Hence its computed font size is 40px (16 * 800 / 320).<br> |
25 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. | 23 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. |
26 </li> | 24 </li> |
27 <li style="position: absolute; overflow: auto; margin-top: 280px; width:
800px; font-size: 2.5rem"> | 25 <li style="position: absolute; overflow: auto; margin-top: 280px; width:
800px; font-size: 2.5rem"> |
28 This list element becomes a separate autosizing cluster since it
's positioned out of the list flow. Hence its computed font size is 40px (16 * 8
00 / 320).<br> | 26 This list element becomes a separate autosizing cluster since it
's positioned out of the list flow. Hence its computed font size is 40px (16 * 8
00 / 320).<br> |
29 Margin is added so it doesn't overlap with the previous element.
<br> | 27 Margin is added so it doesn't overlap with the previous element.
<br> |
30 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. | 28 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. |
31 </li> | 29 </li> |
32 </ul> | 30 </ul> |
33 </body> | 31 </body> |
34 </head> | 32 </head> |
OLD | NEW |