2023年6月20日发(作者：)

HTML5----响应式（⾃适应）⽹页设计（⾃动适应屏幕⼤⼩）HTML5----响应式（⾃适应）⽹页设计（⾃动适应屏幕⼤⼩）现在，很多项⽬都需要做响应式或者⾃适应的来适应我们不同屏幕尺⼨的⼿机，电脑等设备，那么就需要我们在页⾯上下功夫，但移动端的布局不同于pc端，⾸先我们要知道在移动端中，css中的1px并不等于物理上的1px，因为⼿机屏幕的分辨率已经越来越⾼，⾼像素但是屏幕尺⼨却没有发⽣太⼤变化，那就意味着⼀个物理像素点实际上塞⼊了好⼏个像素。下⾯我就来说⼀下如何做响应式（⾃适应）的⽹页设计1、在⽹页代码的头部，加⼊⼀⾏viewport元标签在⽹页的中增加以下这句话，可以让⽹页的宽度⾃动适应⼿机屏幕的宽度，下⾯是这些属性的解释：1

属性initial-scale=1.0描述initial-scale为设置页⾯的初始缩放值，可以是⼀个带⼩数的数字，1.0就是占⽹页的100%width=device-widthwidth为设置layout viewport 的宽度，为⼀个正整数，”width-device”表⽰宽度是设备屏幕的宽度minimum-scale=1.0表⽰最⼩的缩放⽐例maximum-scale=1.0表⽰最⼤的缩放⽐例user-scalable=no表⽰⽤户是否可以调整缩放⽐例，值为”no”或”yes”2、宽度不要⽤绝对的 　1 width:auto; / width:XX%;

3、字体⼤⼩是页⾯默认⼤⼩的100%，即16像素，不要使⽤绝对⼤⼩"px"，要使⽤相对⼤⼩“rem”1 html{font-size:62.5%;}2 body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }

html的字体⼤⼩设置为font-size:62.5%原因：浏览器默认字体⼤⼩是16px，rem与px关系为：1rem = 10px，10/16=0.625=62.5%，为了⼦元素相关尺⼨计算⽅便，这样写最合适不过了。4、流动布局，"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的1 .left{ width:30%; float:left}

2 .right{ width:70%; float:right;}像这样，⽤左浮动和右浮动，好处是，如果宽度太⼩，放不下两个元素，后⾯的元素会⾃动滚动到前⾯元素的下⽅，不会在⽔平⽅向overflow（溢出），避免了⽔平滚动条的出现5、选择加载CSS"⾃适应⽹页设计"的核⼼，就是CSS3引⼊的Media Query模块。⾃动探测屏幕宽度，然后加载相应的CSS⽂件1 这段代码的意思是：如果屏幕宽度⼩于600像素（max-device-width: 600px），就加载⽂件。如果屏幕宽度在600像素到980像素之间，则加载⽂件1

还有(不建议使⽤)：除了⽤html标签加载CSS⽂件，还可以在现有CSS⽂件中加载1 @import url("") screen and (max-device-width: 600px); 6、CSS的@media与@media screen，媒体查询/匹配在互联⽹的通知的今天，在移动端充斥我们⽣活的今天， 做⼀个⾃适应的⽹站是我们不⼆的选择，媒体查询也是css3的⽅法，我们要解决的问题是适应⼿机屏幕，这个媒体查询正是为解决这个问题⽽⽣。媒体查询的功能就是为不同的媒体设置不同的css样式，这⾥的“媒体”包括页⾯尺⼨，设备屏幕尺⼨等。⾸先先讲⼀下@media与@media screen区别@media与@media screen两者在⼿机设备上没有区别，但@media screen的css在打印设备⾥是⽆效的，⽽@media在打印设备⾥是有效的，如果css需要⽤在打印设备⾥，那么就⽤@media 。【阿⾥云】上有实例讲解哦~~语法以@media或@media screen and开头来表⽰这是⼀条媒体查询语句。@media后⾯的是⼀个或者多个表达式，如果表达式为真，则应⽤样式。上⾯的代码在屏幕宽度⼩于 600px 的时候，会作⽤⼤括号⾥的内容。3 @media (max-width: 600px) {4 .mainner {5 display: none;6 }7 }

注：max-width是⽬标显⽰区域的宽度，例如，浏览器宽度。媒体查询可以在 link标签上加media属性或css⽂件中使⽤。具体例⼦就不举了。@media screen以下例⼦为当屏幕宽度⼩于400px的时候，就取消浮动1 @media screen and (max-device-width: 400px)

2 { .left {3 float:none;4 }

5 }注：max-device-width是设备整个显⽰区域的宽度，例如，真实的设备屏幕宽度。知识扩展@media only screen andonly(限定某种设备)screen 是媒体类型⾥的⼀种and 被称为关键字，其他关键字还包括 notnot 指定某种特定的媒体类型，可以⽤来排除不⽀持媒体查询的浏览器：例如：如果浏览器窗⼝⼩于 500px, 背景将变为浅蓝⾊：@media only screen and (max-width: 500px) { body { background-color: lightblue; }}7、图⽚⾃适应，"⾃适应⽹页设计"还必须实现图⽚的⾃动缩放。img {width: 100%;} windows平台缩放图⽚时，可能出现图像失真现象。这时，可以尝试使⽤IE的专有命令1 img { width:100%; -ms-interpolation-mode: bicubic;}

或使⽤js–oadEvent(function() {

　　var imgs = mentById("content").getElementsByTagName("img");

　　e(imgs);

});

好，这样写出的⽹页就会⾃适应啦！-------------------------------------------------------------------------------------------------------转载csdn：

2023年6月20日发(作者：)

HTML5----响应式（⾃适应）⽹页设计（⾃动适应屏幕⼤⼩）HTML5----响应式（⾃适应）⽹页设计（⾃动适应屏幕⼤⼩）现在，很多项⽬都需要做响应式或者⾃适应的来适应我们不同屏幕尺⼨的⼿机，电脑等设备，那么就需要我们在页⾯上下功夫，但移动端的布局不同于pc端，⾸先我们要知道在移动端中，css中的1px并不等于物理上的1px，因为⼿机屏幕的分辨率已经越来越⾼，⾼像素但是屏幕尺⼨却没有发⽣太⼤变化，那就意味着⼀个物理像素点实际上塞⼊了好⼏个像素。下⾯我就来说⼀下如何做响应式（⾃适应）的⽹页设计1、在⽹页代码的头部，加⼊⼀⾏viewport元标签在⽹页的中增加以下这句话，可以让⽹页的宽度⾃动适应⼿机屏幕的宽度，下⾯是这些属性的解释：1

属性initial-scale=1.0描述initial-scale为设置页⾯的初始缩放值，可以是⼀个带⼩数的数字，1.0就是占⽹页的100%width=device-widthwidth为设置layout viewport 的宽度，为⼀个正整数，”width-device”表⽰宽度是设备屏幕的宽度minimum-scale=1.0表⽰最⼩的缩放⽐例maximum-scale=1.0表⽰最⼤的缩放⽐例user-scalable=no表⽰⽤户是否可以调整缩放⽐例，值为”no”或”yes”2、宽度不要⽤绝对的 　1 width:auto; / width:XX%;

3、字体⼤⼩是页⾯默认⼤⼩的100%，即16像素，不要使⽤绝对⼤⼩"px"，要使⽤相对⼤⼩“rem”1 html{font-size:62.5%;}2 body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }

html的字体⼤⼩设置为font-size:62.5%原因：浏览器默认字体⼤⼩是16px，rem与px关系为：1rem = 10px，10/16=0.625=62.5%，为了⼦元素相关尺⼨计算⽅便，这样写最合适不过了。4、流动布局，"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的1 .left{ width:30%; float:left}

2 .right{ width:70%; float:right;}像这样，⽤左浮动和右浮动，好处是，如果宽度太⼩，放不下两个元素，后⾯的元素会⾃动滚动到前⾯元素的下⽅，不会在⽔平⽅向overflow（溢出），避免了⽔平滚动条的出现5、选择加载CSS"⾃适应⽹页设计"的核⼼，就是CSS3引⼊的Media Query模块。⾃动探测屏幕宽度，然后加载相应的CSS⽂件1 这段代码的意思是：如果屏幕宽度⼩于600像素（max-device-width: 600px），就加载⽂件。如果屏幕宽度在600像素到980像素之间，则加载⽂件1

还有(不建议使⽤)：除了⽤html标签加载CSS⽂件，还可以在现有CSS⽂件中加载1 @import url("") screen and (max-device-width: 600px); 6、CSS的@media与@media screen，媒体查询/匹配在互联⽹的通知的今天，在移动端充斥我们⽣活的今天， 做⼀个⾃适应的⽹站是我们不⼆的选择，媒体查询也是css3的⽅法，我们要解决的问题是适应⼿机屏幕，这个媒体查询正是为解决这个问题⽽⽣。媒体查询的功能就是为不同的媒体设置不同的css样式，这⾥的“媒体”包括页⾯尺⼨，设备屏幕尺⼨等。⾸先先讲⼀下@media与@media screen区别@media与@media screen两者在⼿机设备上没有区别，但@media screen的css在打印设备⾥是⽆效的，⽽@media在打印设备⾥是有效的，如果css需要⽤在打印设备⾥，那么就⽤@media 。【阿⾥云】上有实例讲解哦~~语法以@media或@media screen and开头来表⽰这是⼀条媒体查询语句。@media后⾯的是⼀个或者多个表达式，如果表达式为真，则应⽤样式。上⾯的代码在屏幕宽度⼩于 600px 的时候，会作⽤⼤括号⾥的内容。3 @media (max-width: 600px) {4 .mainner {5 display: none;6 }7 }

注：max-width是⽬标显⽰区域的宽度，例如，浏览器宽度。媒体查询可以在 link标签上加media属性或css⽂件中使⽤。具体例⼦就不举了。@media screen以下例⼦为当屏幕宽度⼩于400px的时候，就取消浮动1 @media screen and (max-device-width: 400px)

2 { .left {3 float:none;4 }

5 }注：max-device-width是设备整个显⽰区域的宽度，例如，真实的设备屏幕宽度。知识扩展@media only screen andonly(限定某种设备)screen 是媒体类型⾥的⼀种and 被称为关键字，其他关键字还包括 notnot 指定某种特定的媒体类型，可以⽤来排除不⽀持媒体查询的浏览器：例如：如果浏览器窗⼝⼩于 500px, 背景将变为浅蓝⾊：@media only screen and (max-width: 500px) { body { background-color: lightblue; }}7、图⽚⾃适应，"⾃适应⽹页设计"还必须实现图⽚的⾃动缩放。img {width: 100%;} windows平台缩放图⽚时，可能出现图像失真现象。这时，可以尝试使⽤IE的专有命令1 img { width:100%; -ms-interpolation-mode: bicubic;}

或使⽤js–oadEvent(function() {

　　var imgs = mentById("content").getElementsByTagName("img");

　　e(imgs);

});

好，这样写出的⽹页就会⾃适应啦！-------------------------------------------------------------------------------------------------------转载csdn：