前端开发页面自适应 应注意哪些事项

前端开发pc页面|项目开发的前端页面|前端开发 页面仔

1、将网页修改为百分比布局

根据一个简易的公式将固定像素宽度转换成对应的百分比宽度:目标元素宽度÷ 上下文元素宽度 = 百分比宽度

pc端我们定义样式宽度时一般是:

menu {

margin-right: 10px;

margin-left:10px;

width: 940px;

}

转换为百分比的menu区块的css为:

menu {

margin-right: 10px;

margin-left: 10px;

width: 97.916667% / 940 ÷ 960 /

}
2、要阻止移动浏览器自动调整页面大小
iOS和Android浏览器都基于webkit核心,这两种浏览器以及其他的很多浏览器都支持viewport meta元素覆盖默认的画布缩放设置,只需在html的<head>标签中插入一个<meta>标签,<meta>标签中可以设置具体的宽度(如像素值)或者缩放比例2.0(设备实际尺寸的两倍),下面是将一个页面放大到设备实际尺寸两倍显示的meta标签示例:<meta name=”viewport” content=”initial-scale=2.0,width=device-width”/>

4、用em替换px

目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度这个公式也适用于将文字的像素单位转换为相对单位,值得注意的是,现代浏览器的默认文字都是16像素,因此一开始给body标签应用下列任何一条规则所产生的效果都一样:

font-size: 100%;

font-size:16px;

font-size: 1em;

5、要主要流动布局(fluid grid)的使用
“流动布局”指的是各个区块的位置都浮动,不是固定不变的。

.main {float: right;width: 70%;}

.leftBar {float: left;width: 25%;}
这么做的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向溢出,避免了水平滚动条的出现,大大提升了用户的阅读体验。另外,绝对定位(position:absolute)的使用,也要非常小心。

web前端开发面试上机|哪些行业需要web前端开发|前端开发需要用到ps吗

» 本文来自:前端开发者 » 《前端开发页面自适应 应注意哪些事项》
» 本文链接地址:https://www.rokub.com/4661.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!