您的位置：首页 > 其它

响应式布局下的max-width！

2015-06-01 19:34 363 查看 
<pre name="code" class="html"><pre name="code" class="html"><!--
<meta name="viewport" content="width=device-width, initial-scale=1.0">为响应式标记,
即整个页面会随着终端屏幕大小自动响应.
1.没有宽度限制,图片始终以默认的宽高展示,不会响应终端屏幕变化.
2.有宽度限制,图片会根据指定的宽度进行缩放,会响应终端屏幕变化.
3.有max-width限制,图片以默认的宽高展示,并且会限制在指定宽度内进行缩放,会响应终端屏幕变化.
4.有max-width限制,图片宽度小于max-width时,会按百分比100%*60%缩放,
     当图片宽度大于max-width时,会按800px展示.
-->
<!DOCTYPE html>
<html>
  <head>
    <title>test.html</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  
  <body>
  1:<p><img alt="img1" src="image/img1.png"></p>
  	<p><img alt="img2" src="image/img2.png"></p>
  2:<p><img alt="img1" src="image/img1.png" style="width:60%;"></p>
  	<p><img alt="img2" src="image/img2.png" style="width:60%;"></p>
  3:<p><img alt="img1" src="image/img1.png" style="max-width:60%;"></p>
  	<p><img alt="img2" src="image/img2.png" style="max-width:60%;"></p>
  4:<div id="div1" style="width:60%;max-width:600px;background-color:grey;border:10px solid red">
  		<img alt="img1" src="image/img1.png" style="max-width:100%;">
		<img alt="img2" src="image/img2.png" style="max-width:100%;">
  	</div>
  </body>
</html>






                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航