·PC端网页布局方案
一、静态布局
内容在一屏内显示,采用了内容框左右居中的办法,里面的内容绝 对于这个内容框定位。这样一来,在不同大小屏中,内容总是在中 间,看起来较正常。(目前市面上最常见的pc端布局方式) 这种方式中间内容框的取值范围一般在960 – 1100之间;因为内 容框中的元素定位全部相当于这个内容框,所以在不同的屏幕尺 寸下,大小不会发生改变。
二、自适应布局
就是为了使网页自适应的显示在不同大小终端设备上的新网页设 计方式及技术,需要开发多套界面来适应不同的终端。自适应是 为了解决如何才能在不同大小的设备上呈现同样的网页。
以前自适应布局会开发多套程序,以适配不同的设备大小;不过目前实际开发中,更多的是通过media媒体查询,实现几个关键断点的自适应:
(1) 阶梯式自适应
(2) 平滑式自适应
2-1.自适应布局--阶梯式自适应
(1)有设计稿
(2)只有一版设计稿
当只有一版设计稿的时候,如果采用阶梯式自适应布局 ,那么需要计算不同尺寸下元素的缩放比例(庞大的工程量),所以最好使用平滑式自适应布局方式;
2-2.自适应布局—平滑式自适应
(1)百分比布局 %
通过计算设计稿的尺寸,计算元素占据的百分比,一般 只考虑宽度,高度固定;使用百分比布局一般会采用min-width 、max-width限制主体内容区域的宽度;
(2) rem布局
rem布局可以更加完美的复刻设计稿样式(可以设置高度),并且可以适配任何尺寸的屏幕大小;但是rem单位不支持ie6/7/8,在考虑兼容的情况下rem单位就不是非常适合了。 而且rem是一个相对单位,在换算过程中肯定会有小数的存在,会导致某些布局不是非常完美(虽然很少发生),还有就是在缩放的时候文字的缩放的效果会非常明显,所以对于文字的设置推荐使用media媒体查询针对几个固定大小设置固定值; 世上没有最完美的布局方式,只有最合适的布局方式,所以就算使用rem在做布局时,也可以搭配px,%去完成。
1>rem布局的核心技术:
(1)根元素(html标签)设置字体大小;
设置根元素字体大小的目的是想确定1rem等于多少px,方便在后续布局时可以确定元素的大小。在这里设置的时候需要用到反证法确定,就是你想让你的1rem等于多少px方便你后续的程序设计;
常用尺寸:
固定尺寸: 1rem = 10px; -> style =“font-size:10px”;
1rem = 100px; -> style = “font-size:100px”;
动态尺寸(默认字体大小为16px)
1rem = 62.5%; -> style =“font-size:62.5%”;
1rem = 625%; -> style = “font-size:625%”;
- 根节点设置字体两个问题
(1) Chrome浏览器支持的最小字体是12px,所以如果设置62.5%的时候在Chrome浏览器下会被强行解析成12px,按理来说设置width:1rem;会被解析成12px(因为font-size是12px),但是实际情况确实width被解析成了10px,这样就导致了字体与rem的关联产生了混乱, 所以推荐的解决方法: 设置font-size:625%; (1rem = 100px),这样就避免了谷歌浏览器最小字体的限制问题;
(2) 推荐设置根节点字体时使用动态的方式设置 原因:设置成固定尺寸就丢失了用户自定义默认字体大小能力。
(2)JavaScript控制根元素的字体大小;
通过js控制根元素字体大小可以实现不同屏幕尺寸下,页面元素等比缩放。
设计稿 | 元素 | font-size | css样式 |
1000 | 200 | 100px | 2rem |
实际屏幕尺寸 | 实际元素 | 实际font-size | css样式 |
800 | ? | ? | 2rem |
600 | ? | ? | 2rem |
- 关于平滑自适应js代码的几个问题:
1.推荐js代码写成内联形式写在body之前,主要目的是保证页面加载完毕之前,先设置好html的font-size属性值;
2.最终设置的font-size值为具体像素值,没有写成动态的,主要目的是考虑的尺寸的切换可能会产生不精确的font-size值,所以这里需要做个取舍;(推荐百分比)
三、流式布局
流式布局是一种等比例缩放布局方式,在CSS代码中使用百分比来设置宽度,也称百分比自适应的布局。 流式布局实现方法是将CSS固定像素宽度换算为百分比宽度。
一些常见布局: 左右布局,左侧固定,右侧百分比; 左中右布局,中间固定,左右百分比; 现在的主流布局方式都是多种布局方案配合起来一起使用;
代表结构: 栅格系统 ( 练习:制作自己的栅格系统 ) bootstrap响应式方案就是media媒体查询结合栅格系统完成的;
四、响应式布局
响应式布局的核心就是一套程序适配所有终端,如果严格的说,响应式网站的建设是最困难的,因为你需要考虑pc端的不同尺寸,pad端的不同尺寸,手机端的不同尺寸,等等。但是,在实际开发中,结合自适应的特点,适配特定的几个关键节点,就可以相对简单的完成响应式项目开发;
Bootstrap中使用的关键点:
响应式开发主流的布局方式:
media+栅格系统 meida+flex (考虑兼容问题)
做响应式布局,一定要写上:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
补充一点: 如果做响应式开发,对于设计稿的还原度就不是很高了,所以在做响应式开发的时候,一定要与你们的领导或者ui多交流沟通,确定最终的形式;
标签:网页,适配,布局,适应,设置,rem,font,size From: https://blog.csdn.net/2401_84341495/article/details/139373621