自适应网页设计 or 响应式Web设计

最新推荐文章于 2025-05-10 07:49:52 发布

jun_h5

最新推荐文章于 2025-05-10 07:49:52 发布

阅读量2.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： @media响应式设计文章标签：响应式 media

本文链接：https://blog.youkuaiyun.com/qq_26445509/article/details/51567517

@media响应式设计专栏收录该内容

2 篇文章

订阅专栏

本文介绍了实现网页自适应布局的方法，包括使用viewport元标签、百分比宽度、相对大小字体、浮动定位、媒体查询等技术手段，并提供了实际案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：http://sc.chinaz.com/info/141121507292.htm

一、允许网页宽度自动调整

首先引入viewport元标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

或：用js自动适配设备宽度。

var deviceWidth = document.documentElement.clientWidth,

        scale = deviceWidth/750;

        var deviceHeight = document.documentElement.clientHeight;

        $('body').css('zoom',scale);

二、尽量不使用绝对宽度

一般指定百分比宽度：

width:**%; width:auto;

三、相对大小的字体

如网页要求高，自适应强，建议字体也不用px，而是用相对大小的(em,rem);

网页默认为16px大小。

假设字体大小为14px；

.footer-nav {font-size: .875em;}

chrome默认最小字体为16px，比16还小需要加上一行代码：

.footer-nav {

1. font-size: 14px;
2. -webkit-transform:scale(.875);

}

比如想设置成14px，那么单独给这个元素添加scale标签，可达到14px的字体大小。

四、使用浮动定位

浮动布局的核心就是让元素脱离普通流，

然后使用width/height，margin/padding将元素定位

注意：子元素设置为浮动后(浮动元素已经脱离了普通流)，父对象的高度就坍塌了，需要对父对象后的

元素清除浮动，这样父对象的高度才能被浮动子元素撑起来了。

.parent{

content:"";

clear:both;

display:block;

}

.left{

    width:20%;

height:180px;

    float:left;

}

.right{

    width:20%;

height:180px;

    float:right;

}

.center{

margin-left:21%;

margin-right:21%;

  height:180px;

}

使用inline-block时会有4px左右的空隙，因为代码的换行符导致。

解决：在inline-block父元素中设置font-size:0;

给inline-block的所有兄弟元素font-size值

inline-block:的高度对齐。vertical-align:top/bottomm/middle对齐即可

绝对定位：

给定参考坐标系+坐标确定位置。

position:absolute; left:0; top:0;

clear:left/right/both;

清除某一方向的浮动，可使元素依次往下排

五、使用@media

详情请参考另一篇文章《@media响应式媒介尺寸》内容。

http://blog.youkuaiyun.com/qq_26445509/article/details/51567590

六、导航栏代码技巧

example:

列几个关键点

1. width:calc(100% - 60px);

2. css伪类:after,:before

3. display:flex; flex:1;布局

4. display:table,display:table-cell;

5. width:30%;使用百分比。

七、Windows 与 OS X系统中字体的区别

iOS 9以前

中文：Heiti-SC（黑体-简）

英文：Helvetica

iOS 9字体的介绍与使用

中文：苹方

英文：san francisco

https://zhuanlan.zhihu.com/p/20287975

body, html {

font-family: 'PingFang SC','Gotham','Myriad Set Pro' ,'STHeitiSC-Light', 'Microsoft YaHei', sans-serifsans-serif;

}

如上所述：

1. PingFang SC————>为OS X的默认字体；

2. Gotham，Myriad Set Pro——>为引入字体；

3.STHeitiSC-Light————>为苹果黑体

4.Microsoft YaHei————>Windows的微软雅黑

5.sans-serifsans-serif————>无衬线字体，计算机内嵌字体；

如需了解更多请参考另一篇文章：

《关于web中的字体，.woff，.eot，.svg》

http://blog.youkuaiyun.com/qq_26445509/article/details/51013126