江苏龙网

  1. 主页 > 生活百科 > >

前端开发工程师必会的5种网页布局方式( 二 )

网页布局


前端开发工程师必会的5种网页布局方式

文章插图
 
响应式几乎已经成为优秀页面布局的标准 。
1. 布局特点
每个屏幕分辨率下面会有一个布局样式 ， 即元素位置和大小都会变 。
2. 设计方法
媒体查询+流式布局 。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局 ， 实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称 。
优点：适应pc和移动端 ， 如果足够耐心 ， 效果完美 。
缺点：（1）媒体查询是有限的 ， 也就是可以枚举出来的 ， 只能适应主流的宽高 。（2）要匹配足够多的屏幕大小 ， 工作量不小 ， 设计也需要多个版本 。
响应式页面在头部会加上这一段代码：
<meta name="Applicable-device" content="pc,mobile"><meta http-equiv="Cache-Control" content="no-transform ">
五、弹性布局（rem/em布局）
前端开发工程师必会的5种网页布局方式

文章插图
 
1. rem/em区别：rem是相对于html元素的font-size大小而言的 ， 而em是相对于其父元素 。
2. 使用 em 或 rem 单位进行相对布局 ， 相对%百分比更加灵活 ， 同时可以支持浏览器的字体大小调整和缩放等的正常显示 ， 因为em是相对父级元素的原因没有得到推广 。【中国站点制作网页的时候 ， 习惯用CSS强制定义字体大小 ， 保证每个人都看到一致的效果 ， 包括网易、搜狐这些门户网站在内的大部分站点 ， 用的都是绝对单位px（像素） 。但是 ， 如果从网站易用性方面考虑 ， 字体大小应该是可变的 ， 一些视力不是那么好的人需要放大字体才能看得清页面内容 。然而 ， 占据大部分浏览器市场的IE无法调整那些使用px作为单位的字体大小 。国外人士非常重视网站的易用性 ， 相当一部分外国站点已经使用em作为字体单位 。
3. 这类布局的特点是 ， 包裹文字的各元素的尺寸采用em/rem做单位 ， 而页面的主要划分区域的尺寸仍使用百分数或px做单位（同「流式布局」或「静态/固定布局」） 。早期浏览器不支持整个页面按比例缩放 ， 仅支持网页内文字尺寸的放大 ， 这种情况下 。使用em/rem做单位 ， 可以使包裹文字的元素随着文字的缩放而缩放 。
4. 浏览器的默认字体高度一般为16px ， 即1em:16px ， 但是 1:16 的比例不方便计算 ， 为了使单位em/rem更直观 ， CSS编写者常常将页面跟节点字体设为62.5% ， 比如选择用rem控制字体时 ， 先需要设置根节点html的字体大小 ， 因为浏览器默认字体大小16px*62.5%=10px 。这样1rem便是10px ， 方便了计算 。
5. 用em/rem定义尺寸的另一个好处是更能适应缩进/以字体单位padding或margin／浏览器设置字体尺寸等情况（因为em/rem相对于字体大小 ， 会同步改变） 。例如：p{ text-indent: 2em; } 。
6. 使用rem单位的弹性布局在移动端也很受欢迎 。
7. 其实在移动端使用所谓的弹性布局 ， 是比较勉强的 。移动端弹性布局流行起来的原因归根结底是rem单位对于（根据屏幕尺寸）调整页面的各元素的尺寸、文字大小时比较好用 。其实 ， 使用vw、vh等后起之秀的单位 ， 可以实现完美的流式布局（高度和文字大小都可以变得“流式”） ， 弹性布局就不再必要了 。
六、结论1.如果只做pc端 ， 那么静态布局（定宽度）是最好的选择 。
2.如果做移动端 ， 且设计对高度和元素间距要求不高 ， 那么弹性布局（rem+js）是最好的选择 ， 一份css+一份js调节font-size搞定 。
3.如果pc ， 移动要兼容 ， 而且要求很高那么响应式布局还是最好的选择 ， 前提是设计根据不同的高宽做不同的设计 ， 响应式根据媒体查询做不同的布局 。




推荐阅读


上一篇：滇红工夫的外形与香味

下一篇：怎么保存红茶才是最好的