自媒体查询、flex弹性布局、响应式布局及 rem 布局

时间:2021-6-12 作者:qvyue

功能简介:

    自媒体查询、rem布局、响应式布局技术,是三个不同的技术。 自媒体查询 常用在适配不同的设备显示场景下,根据屏幕大小显示不同页面,但功能大致不变的这么一个技术。rem布局 它是一个长度单位,这个长度单位是根据‘根元素’的字体大小的单位确定的(根元素字体大小 = 1rem)。响应式布局 它是在页面宽度改变时,整个页面或者页面中的局部随着页面的缩放进行响应并实时变化(响应式布局和自媒体查询有区别)。在如今复杂的开发中这几个技术越来越密不可分,在项目中可以通过实际需求进行搭配。

自媒体查询:

        功能:自媒体查询主要是设置不同的设备屏幕下的显示样式。 

        获取浏览器或设备宽度:

                    min-device-width (设备的宽度)   min-width  (浏览器的宽度)   (注释:也可以获取高度,就是将width改写成height)

        方法:

 公共部分:              
 

         内部样式引用(可以编写多组):      
               1、 @media screen and (min-device-width:200px) and (max-device-width:300px) {  /* 编写样式 */  }  

               2、 /* 编写样式 */    

        外部样式引用(可以引用多个外部样式表):

                1、

                    

flex弹性布局:

         功能: 

就是使用flex对页面进行布局,也可以是响应式的。

         方法:   一下方法为flex常用方法,具体学习可以点击链接  flex布局

                作用在父元素的方法:

                        flex-direction:  设置主轴方向

                        flex-wrap:  是否让子元素换行

                        justify-content:设置主轴对齐方式

                        align-items:  设置交叉轴的对齐方式

                作用在子元素的方法(简写):

                        flex:参数一(数字)、参数二

(数字)

、参数三(px / %)       

                   参数一:子元素平分多余父元素的空间。     参数二:子元素按比例压缩超出父元素的宽度。      参数三:设置该元素的宽。

                   

自媒体查询、flex弹性布局、响应式布局及 rem 布局

rem的使用方法

        概念:指相对跟元素的字体大小的单位。(补充:rem于em的区别一个是以根元素字体大小为参考,em是以父级元素为参考)

        使用方法:

                一般使用媒体查询+rem或js,在不同宽度的窗口下自动调节字体大小。

手动设定:

         html{ font-size: 18px;  }      1rem = 18px

js方式自适应:

        const c = ()=>{

                let w = document.documentElement.clientWidth; // 获取设备的宽度

                let n = (20*(w/320)>40?40+’px’:(20*(w/320)+’px’)) //20为参数  320设备宽度  40显示最大字号

                document.documentElement.style.fontSize = n        // 设置根字体大小

        }

        window.addEventListener(‘load’,c)     //初始值

        window.addEventListener(‘resize’,c)     //屏幕改变的是的值

    

自适应布局

布局特点:不同设备对应不同的HTML或者局部自适应。(不同的设备不同的页面)

js实现方法:

        const redireat = ()=>{

            let userAgent = nevigator.userAgent.toLowerCase()   //获取设备信息

            let device = /ipad|iphone|midp|rv:1.2.3.4|ucwed|android|windows ce|windows mobile/   //适配不同设备

            if(derice.test(userAgent)){

                window.location.href = ‘move.html’  //跳转移动端页面

            }else{

                window.location.href=’pc.html’   //跳转PC端页面

            }

        }

        redireat()

    

响应式布局

        布局特点:确保一个页面在所有终端上,都能显示出令人满意的效果。(一套方案,处处运行。)

        设计思路:使用自媒体查询及用 % 或 rem 作为单位,对不同视口设备进行编写样式。

rem弹性布局

            布局特点:为了保证在各种屏幕上得不失真,就要根据实际屏幕宽度做等比换算。(一套方案,是不同尺寸、分辨率的视口呈现出较好的效果。)

             设计思路:使用自媒体查询及用 % 或 rem 作为单位,对不同视口设备进行编写样式。

总结:

        在项目开发中,根据项目的实际情况选择不同的技术的搭配,这样才能实现业务的效果。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。