首页 > 其他分享 >网页适配

网页适配

时间:2024-06-01 16:00:58浏览次数:20  
标签:网页 适配 布局 适应 设置 rem font size

 ·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控制根元素字体大小可以实现不同屏幕尺寸下,页面元素等比缩放。

预期的rem与px转换比例:100
设计稿元素font-sizecss样式
1000200100px2rem
实际屏幕尺寸实际元素实际font-sizecss样式
8002rem
6002rem
        - 关于平滑自适应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

相关文章