专业自适应网站建设地址自适应网站建设地址( 二 )

文章插图

2、不使用绝对宽度

在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此， css中的像素只是一个抽象的单位，在不同的设备或不同的环境中， css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3 ，它的分辨率为320x480 ，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960 ，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。

3、流动布局

流动布局（fluid grid） "流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。
.main {float: right;width: 70%; }
.leftBar {float: left;width: 25%;}
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
【专业自适应网站建设地址自适应网站建设地址】

文章插图

4、MediaQuery模块

"自适应网页设计"的核心，就是CSS3引入的MediaQuery模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="https://www.baikexueshe.com/s/a.css"
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载a.css文件。
link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="https://www.baikexueshe.com/s/b.css"
如果屏幕宽度在400像素到600像素之间，则加载b.css文件。

文章插图

5.扩展思考自适应与响应式的区别
自适应是为了解决如何才能在不同大小的设备上呈现同样的网页，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整网页内容大小。但是无论怎样，他们主体的内容和布局是没有变的。
自适应还是暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看，内容过于拥挤，响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动。
响应式布局被大家熟知的一个重要原因就是 twitter 开源了 bootstrap 。

特别声明：本站内容均来自网友提供或互联网，仅供参考，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。

专业自适应网站建设地址 自适应网站建设地址( 二 )

专业自适应网站建设地址自适应网站建设地址( 二 )