欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  那么,我们如何使用REM?
 
  假设我们有这个CSS:
 
  CSS
 
  articleh2{font-size:20px;}
 
  articlep{font-size:12px;}
 
  首先,我们需要确定相对于所有字体的px大小。为了方便起见,我所做的最好的做法是使rootfont-size1px像这样:
 
  CSS
 
  html{font-size:1px;}
 
  其次,我们需要将其余的字体大小值从像素替换为rem单位。
 
  CSS
 
  articleh2{font-size:20rem;}
 
  articlep{font-size:12rem;}
 
  REM做什么,需要20REM并将其与根元素相乘:
 
  20REM*1PX=20PX.
 
  浏览器支持
 
  IE7和IE8仍然需要使用PX值。这将迫使我们两次写入字体大小,一次在PX中,第二次用REM。
 
  CSS
 
  articleh2{font-size:20px;font-size:20rem;}
 
  articlep{font-size:12px;font-size:12rem;}
 
  示例如下:
 
  
 
  
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <metacharset="utf-8">
 
  <title></title>
 
  <styletype="text/css">
 
  html{font-size:1px;}
 
  articleh2{
 
  font-size:20px;/*SupportIE7&IE8*/
 
  font-size:20rem;
 
  }
 
  articlep{
 
  font-size:12px;/*SupportIE7&IE8*/
 
  font-size:12rem;
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <section>
 
  <article>
 
  <h2>php中文网</h2>
 
  <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
 
  </article>
 
  <article>
 
  <h2>php中文网1</h2>
 
  <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
 
  </article>
 
  <article>
 
  <h2>php中文网2</h2>
 
  <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
 
  </article>
 
  </section>
 
  </body>
 
  </html>



 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c56674.shtml