浅谈Web自适应

<body>

<div>

</div>

</body>

</html>

让元素飞起来-媒体萌芽

@media screen and (device-width: 640px) { /*iphone4/iphon5*/ 
 
      html { 
 
        font-size: 100px; 
 
      } 
 
    } 
 
@media screen and (device-width: 750px) { /*iphone6*/ 
 
      html { 
 
        font-size: 117.188px; 
 
      } 
 
    } 
 
@media screen and (device-width: 1240px) { /*iphone6s*/ 
 
      html { 
 
        font-size: 194.063px; 
 
      } 
 
    }

这种方法也是可行的，缺点是灵活性不高，取每个设备的精确值须要本身去计算，所以只能取范围值。推敲设备屏幕浩瀚，分辨率也参差不齐，把每一种机型的css代码写出来是不太可能的。然则它也有长处，就是无需监听浏览器的窗口变更，它会跟随屏幕犊飕变更。媒体萌芽的用法当然不仅仅像在此处这么简单，相对于第二种自适应来说有很多处所是前者所远远不及的。最明显的就是它可以根据不合设备显示不合的构造样式!请留意，这里已经不是改变字体和高度那么简单了，它直接改变的是构造样式!

@media screen and (min-width: 320px) and (max-width: 650px) { /*手机*/ 
 
  .class { 
 
    float: left; 
 
  } 
 
} 
 
@media screen and (min-width: 650px) and (max-width: 980px) { /*pad*/ 
 
  .class { 
 
    float: right; 
 
  } 
 
} 
 
@media screen and (min-width: 980px)  and (max-width: 1240px) { /*pc*/ 	
			 4/5   首页 上一页 2 3 4 5 下一页 尾页	
			

　　推荐阅读
　　京东“618”在即，这些“京东版”的黑科技你知道吗?
            
            【51CTO.com原创稿件】2017年贵阳数博会方才停止，京东&ldquo;618&rdquo;狂欢节却早已打响&hellip;&hellip;早在6月1日，京东集团提议的&ldquo;618年中购物节&rdquo;就正式拉开了序幕，京东>>>详细阅读


本文标题：浅谈Web自适应
地址：http://www.17bianji.com/lsqh/35584.html
 1/2    1