前端开发 | 自适应布局-变化吧

二叶草

1214
文章

0
评论

2020年2月9日22:04:46IT专区评论阅读模式

一：相对长度单位em

em是相对于当前对象描述文本的字体大小，它是相对长度单位。

1、相对单位em的特性

①、一般浏览器字体大小默认为16px。

②、em的值并不是固定的。

③、em会继承父级元素的字体大小，相对父级的字体大小而发生变化（em的数字值，每次都去乘以父级的字体大小），根据父元素的 font-size 值来计算。

二：相对长度单位rem

rem是CSS3新增的一个相对单位,rem与em的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

1、相对单位rem的特性

①、rem的值并不是固定的。

②、rem是相对根节点html发生变化的，和父节点无关，根据根元素的font-size值来计算。

③、相对单位rem是集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素字体大小就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

三：em、rem使用场景

1、使用em

①、通常不使用 em 单位控制字体大小

②、经常使用em，如首行缩进: text-indent:2em;

2、使用rem

①、一切可扩展都应该使用 rem 单位

②、响应式网站可以使用rem去做适配

3、不使用 em 或 rem

①、多列布局

②、当元素应该是严格不可缩放的时候

四：自适应布局网页

1、自适应概念

为了解决在不同大小屏幕的设备上呈现相同的网页

2、自适应实现方式

①、自适应主要是指的宽度的自适应

②、百分比的流式布局

3、实现方式

①、rem 的值都是根据html的fontsize进行计算的统一缩放元素大小，只要修改html的fontsize

②、在样式中给html设定一个fontsize的值，我们一般设置一个方便后续计算的值，例如10px、100px等，我们使用100px

③、根据当前屏幕的宽度和设计稿的宽度来重新计算html的FontSize的大小，根据当前屏幕宽度和设计稿的宽度的比例，动态计算当前宽度下的fontsize值大小，如果fontsize值改变了，之前设定的所有的rem单位的值自动会跟着改变。

var uiW = 640 // ui设计图的宽度//视口宽度(获取浏览器窗口文档显示区域的宽度，不包括滚动条)winW = document.documentElement.clientWidthrate = winW / uiW;// 比率//定义了当前浏览器支持的fontSize的Css属性值document.documentElement.style.fontSize = rate *100 + "px";

4、完整案例

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" /><style>* {    margin: 0;    padding: 0;}html {    font-size: 100px;}body {    font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;}nav {    overflow: hidden;    box-sizing: border-box;    margin: .08rem 0;}nav ul {    margin: 0 .08rem .06rem .08rem;    height: 1.8rem;    list-style: none;}nav ul li {    float: left;    width: 33.3333%;    height: .9rem;    box-sizing: border-box;    border-left: 1px solid #fff;    border-bottom: 1px solid #fff;    text-align: center;    line-height: .9rem;    background-color: #33FFFF;}nav li a {    font-size: .3rem;    color: #000000;    text-decoration: none;}/*第一个选项*/nav ul li:first-child {    height: 1.8rem; /*占2个高度*/    line-height: 1.8rem; /*文字上下居中*/    border-top-left-radius: .1rem;  /*圆角*/    border-bottom-left-radius: .1rem; }/*第三个选项*/nav ul li:nth-child(3) {    border-top-right-radius: .1rem;}/*第五个选项*/nav ul li:nth-child(5) {    border-bottom-right-radius: .1rem;}</style></head><script>    // ui设计图的宽度    var uiW = 750,     winW = document.documentElement.clientWidth;  //视口宽度    ratio = winW / uiW;  // 比率    document.documentElement.style.fontSize = ratio * 100 + "px";  // 设置字体大小</script><body>    <nav>        <ul>            <li>                <div><a href="#">爱绅士工作室</a></div>            </li>            <li>                <div><a href="#">软件开发</a></div>            </li>            <li>                <div><a href="#">软件销售</a></div>            </li>            <li>                <div><a href="#">网络运维</a></div>            </li>            <li>                <div><a href="#">电商运营</a></div>            </li>        </ul>    </nav></body></html>

本文来源于：前端开发 | 自适应布局-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。