关于html响应移动端（开发笔记2，@media）

问题：用HBuilder编写html，html可以自动适应移动端

 上篇笔记写了方法一（viewport），这篇笔记是关于@media，两者的不同如下：

viewport：控制页面放大或缩小

@media：编写不同的样式以适应不同的屏幕尺寸

相关链接：

上篇笔记：​​​​​​(12条消息) 关于html响应移动端（开发笔记1）_昏睡的程序猿的博客-CSDN博客

viewport：viewport 深入理解 | 菜鸟教程 (runoob.com)、

@media：CSS3 @media查询 | 菜鸟教程 (runoob.com)

个人总结：

@media用于根据判断也页面大小设计元素样式，因此代码量较大。

@media常见属性：

 @media示例

如果文档宽度小于 300 像素则修改背景颜色(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

（来自于CSS3 @media查询 | 菜鸟教程 (runoob.com)）

实际开发：

此次开发项目较为简单，只需要定义div样式大小就可以

#bottle {
				display: inline-block;
				width: 100%;
				text-align: center;
				font-weight: bold;
			}
			#can {
				display: inline-block;
				width: 100%;
				text-align: center;
				font-weight: bold;
			}

/* 宽度变化 */
		@media (min-width:200px) {
			#bottle{                //修改bottle元素下的字体大小
				font-size:1.2rem ;
				margin-top: 2.6rem;    //修改bottle元素的外边距
				}
			#can{
				font-size:1.2rem ;    //修改can元素下的字体大小
	
			}
		@media (min-width:300px) {    
			#bottle{
				font-size:1.4rem ;        //修改bottle元素下的字体大小
				margin-top: 2.8rem;        //修改bottle元素的外边距
				}
			#can{
				font-size:1.4rem ;         //修改can元素下的字体大小
				}
			}