移动端布局与响应式网页设计：让页面自适应不同设备

HTML5----响应式（自适应）网页设计（自动适应屏幕尺寸）

现在很多项目都需要响应式或者自适应来适应我们的手机、电脑等不同屏幕尺寸的设备，所以我们需要在页面上下功夫，但是移动端的布局与PC不同终端。首先我们要知道到底CSS中的1px不等于物理上的1px，因为手机屏幕的分辨率已经越来越高了。像素高但屏幕尺寸变化不大，这意味着1个物理像素实际上很拥挤。添加了几个像素。现在我来谈谈如何进行响应式（自适应）网页设计

1、在网页代码头部添加一行meta标签

在网页中添加下面这句话，就可以让网页的宽度自动适应手机屏幕的宽度。下面是对这些属性的解释：

属性说明

宽度=-宽度

width为设置的宽度，为正整数。 “width-”表示宽度是设备屏幕的宽度。

-规模=1.0

-scale是设置页面的初始缩放值上海网站SEO，可以是带小数的数字。 1.0 表示网页的 100%。

-规模=1.0

表示最小缩放比例

-规模=1.0

表示最大缩放比例

用户-=否

指示用户是否可以调整缩放比例，值为“no”或“yes”

2.不要使用**宽度

宽度：自动； / 宽度：XX%；

3. 字体大小为页面默认大小的100%，即16像素。不要使用**尺寸“px”，而是使用相对尺寸“rem”

html{font-size:62.5%;}
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. 流畅的布局。 “流体布局”的含义是每个块的位置是浮动的而不是固定的。

.left{ width:30%; float:left} 
.right{ width:70%; float:right;}

像这样，使用左浮动和右浮动，好处是如果宽度太小放不下两个元素，后面的元素会自动滚动到前一个元素的底部，而不是水平方向（溢出），避免了水平滚动条的外观

5.选择加载CSS

“自适应网页设计”的核心是CSS3引入的Media Query模块。自动检测屏幕宽度然后加载对应的CSS文件

这段代码的含义是：如果屏幕宽度小于600像素（max--width: 600px），则加载.css文件。

如果屏幕宽度在600像素到980像素之间，则加载-980.css文件

另外（不推荐）：除了加载带有html标签的CSS文件外，还可以在现有的CSS文件中加载它们

@import url("css600.css") screen and (max-device-width: 600px); 

6. CSS @media和@media，媒体查询/匹配

如今，互联网和移动设备上的通知充斥着我们的生活，制作自适应网站是我们唯一的选择。

媒体查询也是一种 CSS3 方法。我们要解决的问题是适配手机屏幕。这个媒体查询就是为了解决这个问题而诞生的。

媒体查询的作用是针对不同的媒体设置不同的css样式。这里的“媒体”包括页面尺寸、设备屏幕尺寸等。

首先我们来说一下@media和@media的区别

@media和@media在移动设备上没有区别，只是@media的css在打印设备上无效，而@media在打印设备上有效。如果CSS需要在打印设备中使用，那么使用@media。 【阿里云】上有例子讲解~~

语法

以@media 或@media 开头苏州网页制作，表明这是一个媒体查询语句。 @media 后跟一个或多个表达式。如果表达式为 true南京网站定制，则应用该样式。

@媒体

@media (max-width: 600px) {
  .mainner {
    display: none;
  }
}

当屏幕宽度小于 600px 时，上面的代码将应用大括号中的内容。

注意：max-width是目标显示区域的宽度，例如浏览器宽度。

媒体查询可以添加到带有 media 属性的链接标签中或在 css 文件中使用。将不给出具体示例。

@媒体

下面的例子展示了当屏幕宽度小于400px时如何取消浮动。

@media screen and (max-device-width: 400px) 
{  .left {
	 float:none;
   } 
 }

注：max--width是设备整个显示区域的宽度，例如真实设备屏幕宽度。知识扩展仅@媒体和

仅（仅限于特定设备）

是一种媒体

and 称为关键字，其他关键字包括 not

not 指定特定的媒体类型，可用于排除不支持媒体查询的浏览器：

例如：如果浏览器窗口小于500px，背景将变成浅蓝色：

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

7.自适应图片。 “自适应网页设计”还必须实现图片的自动缩放。

img {width: 100%;} 

平台缩放图像时，可能会出现图像失真的情况。这时候你可以尝试使用IE的专有命令

img { width:100%; -ms-interpolation-mode: bicubic;} 

或者使用js–.js

addLoadEvent(function() { 
　　var imgs = document.getElementById("content").getElementsByTagName("img"); 
　　imgSizer.collate(imgs); 
});
　　

好了，这样写出来的网页就自适应了！