响应式布局下的max-width！

最新推荐文章于 2021-02-21 20:21:19 发布

IluckySi

最新推荐文章于 2021-02-21 20:21:19 发布

阅读量2.2k

点赞数

分类专栏： ------javascript 文章标签：响应式 viewport max-width width

本文链接：https://blog.csdn.net/sidongxue2/article/details/46315405

版权

------javascript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<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>

IluckySi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式布局下的max-width！

 test.html
复制链接

扫一扫

专栏目录