html 响应式排版

Posted 2021-05-11

<!-- viewport sized typography - VW whidth - VH height - VMin min 
     1vw = 1% of viewport width - 1vh = 1% of viewport height - 1vmin = 1% of viewport minimun-->

<div>
<h1>Hello</h1>
</div>

<!-- cris coyer script resize gont without page refresh -->
<script type="text/javascript">
$(function(){
    causeRepaintsOn = $("h1, h2, h3, p");
    $(window).resize(function()){
    causeRepaintsOn.CSS("z-index", 1);	
    });
});
</script>

<style>
/*  */

h1 {
	font-size:1.750em; /* fallback */
	font-size:2.5vw;
}
</style>


<!-- fittext.js - good plugin - lettering.js -->

<h1 id="fittext1">hello</h1>


<script src="fittext.js"></script>

<script type="text/javascript">
$("#fittext1").fitText(2.2);	
</script>

<!--  Typography scale 

body   18px  =  1.125em   
title  72px  =  4em
h2     36px  =  2em
h3     24px  =  1.33em
code   16px  =  1rem back to 16px

--------------------------

Default browser text size 16

h1     = 24px 
base   =  16px 

Formula  target / content = result

24 / 16 = 1.5em    h1 = 1.5em


-----------------------------

Nested font

<h1>hello <a href="">word</a></h1>

h1 a{ font-size: 18px; }

Formula  target / content = result

18 / 24 = 0.750em   h1 a = 0.750em

18 = size of a
24 = content the size of h1

-->