首页 > 其他分享 >vue学习第24天 移动WEB开发------ rem适配布局

vue学习第24天 移动WEB开发------ rem适配布局

时间:2023-06-20 14:11:06浏览次数:49  
标签:24 WEB 元素 Less 适配 媒体 查询 rem

目标:

  1)能够使用rem单位

  2)能够使用媒体查询的基本语法

  3)能够使用Less的基本语法

  4)能够使用Less中的嵌套

  5)能够使用Less中的运算

  6)能够使用2中rem适配方案

  7)能够独立完成xx移动端首页

 

思考:

  1、页面布局文字随屏幕大小变化而变化

  2、流式布局和flex布局主要针对于宽度布局,现在针对于高度设置rem适配布局

  3、在屏幕发生变化时 元素高度和宽度等比例缩放

 

                  rem基础

rem单位   以html 的font-size 尺寸做为单位,配合媒体查询设置
  1)常见的单位: px(css像素)、em(以字符尺寸为单位)、pm 、 【绝对单位】cm(厘米)、mm(毫米)

  2)rem(root em) 是一个相对单位,类似于em, em是父亲元素字体大小

  3)不同的是rem 的基准是相对于html元素的字体大小。

  4)根元素(html)设置font-size=12px;非根元素设置width:2rem; 相当于width:24px.

  5)rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制

 

                  媒体查询

1、什么是媒体查询

媒体查询**(Media Query) 是CSS3的新语法。

  1)使用 @media 查询,可以针对不同的媒体类型定义不同的样式(类似于动画的使用)

  2)@media 可以针对不同的屏幕尺寸设置不同的样式

  3)当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度 重新渲染页面

  4)目前针对很多苹果手机、Android手机、平板等设备都用的到多媒体查询

 

2、语法规范

  

  1)mediatype 查询类型

  将不同的终端设备划分成不同的类型,称为媒体类型(screen)

  

  

  2)关键字

  关键字将媒体类型或多个媒体特性链接到一起作为媒体查询的条件

  a)and:可以将多个媒体特性连接到一起,相当于“且”的意思

  b)not:排除某个媒体类型,相当于"非"的意思,可以省略

  c)only:指定某个特定的媒体类型,可以省路

 

  3)媒体特性

  每种媒体类型都具体各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。

  注意:媒体特性写在小括号里、 设置min 或 max 都包含 相等的情况

  

   

3、媒体查询 + rem 实现元素动态大小变化

  1)rem单位是跟看html变化的,有了rem,页面元素可以设置不同大小尺寸

  2)媒体查询可以根据不同设备宽度来修改样式

  3)媒体查询 + rem 就可以实现不同设备宽度,实现页面元素大小的动态变化

 

4、引入资源(理解)

  1)当样式比较繁多的时候,我们可以针对不同的媒体使用不司stylesheets(样式表)。

  2)原理,就是直接往link中判断设备的尺寸 ,然后引用不同的css文件。

   语法:   

  

 

                    Less基础

css写法的升级,并快速生成css文件 

1、维护CSS的弊端

 CSS是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。

 2、Less介绍

 

 3、Less安装

   1)安装nodejs,选择新版本,网址:http:l/nodejs.cn/dawnloadl

  2)检查是否安装成功,命令〞node -v〞查看版本即可

  3)基于nodejs在线安装Less,使用cmd命令 “npm install -g less ”

  4)检查是否安装成功,使用cmd命令“lessc-v〞 查看版本即可

 

 

                    Less基础

Less使用: 我们首先新建一个后级名为less的文件,在这个ess文件里面书写less 语句。

  1)Less变量

  2)Less编译

  3)Less嵌套

  4)Less运算

 

4、Less变量

变量是指没有固定的值,可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

变量命名规范: @变量名: 值

  1)必须@作为前缀

  2)不能包含特殊字符

  3)不能以数字开头

  4)大小写敏感

 

5、Less编译

  vscode Less插件(Easy LESS插件: 可以把 Less文件  编译为 css文件)

  

 

6、Less 嵌套

子元素的样式直接写在 父元素样式的 大括号内

注意:

  

 

  

 

 

 7、Less 运算(重点***)

任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算。

 注意:颜色也可以计算

 

                    rem适配方案

思考:

  1)适配的目标

  2)如何达到目标
  3)实际开发中如何使用

 

rem适配方案:

  1、目标:设备尺寸发生变化、元素等比例适配设备
  2、做法:媒体查询,根据设备尺寸设置html(font-size)rem 基准单位。然后页面的元素以rem 为单位就可以等比例缩放

  

 

1、rem实际开发适配方案

  1)按照设计稿与设备宽度的比例,动态计算并设置html根标签的font-size大小;(媒体查询)

  2)CSS中,设计稿元素的宽、高 相对位置等取值,按照同等比例换算为rem 为单位的值

 

2、rem适配方案技术使用

  

 

3、rem实际开发适配方案1( rem + 媒体查询 + less技术) 

  1)设计稿常见尺寸宽度 (640px / 720px / 750px等)

  一般情况下,我们以一套或两套效果图适应大部分的屏幕,放弃极端屏或对其优雅降级,牺牲一些效果现在基本以750为准

   

  2)动态设置html标签font-size大小

  

 

  3)元素大小取值方法

  第一步:屏幕宽度(px)  /  横向划分的份数  =  html  font-size 的大小(px)

  第二步:页面元素(px) / html font-size的大小(px) =  页面元素的rem值

  总计: 页面元素的rem值。 =  页面元素(px)/    ( 屏幕宽度(px)/ 横向划分份数 )

 

标签:24,WEB,元素,Less,适配,媒体,查询,rem
From: https://www.cnblogs.com/changdasheng/p/17474788.html

相关文章

  • JavaScript中Web应用程序事件处理
    通过下面的代码来绑定事件处理代码,不仅可以为同一事件源的同一事件重复绑定事件处理代码,还可以在只做一次浏览器兼容性检测的情况下完成所有的事件处理绑定。代码如下所示:js/mylib.jsvaraddEvent=function(target,name,fn){if(target.addEventListener)addEven......
  • vue学习第21天 移动WEB开发 --- flex布局(弹性布局)
    学习目标1、flex盒子的布局原理2、flex布局的常用属性3、独立完成某个移动端首页案例 目录1、flex布局体验2、flex布局原理3、flex布局父项常见属性4、flex布局子项常见属性5、案例制作  ......
  • vue学习第18天 css --- 移动web开发 (单独/响应式、常见布局【单独:流式、flex、rem
    学习目标: 目录: 移动端基础 1、浏览器现状  2、手机屏幕现状 3、常见移动端屏幕尺寸查看地址: https://www.strerr.com/screen.html注:作为前端开发,不用纠结dp,dpi,pt,ppi等单位。 4、移动端调试方法 5、......
  • Web项目中使用Spring 3.x + Quartz 2.x实现作业调度详解
    Quartz是一个基于Java的作业调度管理的轻量级框架,目前在很多企业应用中被使用,它的作用类似于java.util中的Timer和TimeTask、数据库中的job等,但Quartz的功能更强大、更灵活。从Quartz2开始,你可以使用POJO作为一个任务(Job),这种开发方式进一步降低了代码的耦合度,如果跟Spring进行整合,......
  • nginx:报错upstream sent too big header(nginx 1.24)
    一,报错信息:访问网站时报错:如图: 查看nginx的错误日志:2023/06/1610:21:46[error]416087#0:*71148upstreamsenttoobigheaderwhilereadingresponseheaderfromupstream,client:223.72.69.14,server:blog.liuhongdi.com,request:"GET/index......
  • Apache Superset 身份认证绕过漏洞(CVE-2023-27524)
    漏洞简介ApacheSuperset是一个开源的数据可视化和数据探测平台,它基于Python构建,使用了一些类似于Django和Flask的Pythonweb框架。提供了一个用户友好的界面,可以轻松地创建和共享仪表板、查询和可视化数据,也可以集成到其他应用程序中。由于用户在默认安装过程中,未对SECRET_KEY的默......
  • Web自动化测试中的最佳实践和常见陷阱
    在现代软件开发中,Web自动化测试已经成为保证软件质量和提高开发效率的重要手段之一。然而,仅凭自动化测试工具和技术并不足以确保成功。下面我们将介绍一些Web自动化测试的最佳实践和常见陷阱,帮助您避免一些常见的错误和困难。首先,让我们来看一些Web自动化测试的最佳实践。首要问题......
  • uniapp企业微信web-view父子通信问题
    项目背景:开发工具为HBuilderX,框架为uniapp,开发移动端的Web应用,在企业微信中使用(自建应用),Web开发的应用,不是小程序。需求:页面中用到<web-view>组件,加载其他系统的页面(有跨域),需要在父子页面之间相互通信。这里通信的东西其实就是获取定位,通过uniapp获取用户定位信息,传递给<web-view......
  • 也说一说IDEA热部署Web项目最终解决方案,确实大大提高工作效率
    热部署就是正在运行状态的应用,修改了它的源码之后,在不重新启动的情况下能够自动把增量内容编译并部署到服务器上,使得修改立即生效。热部署为了解决的问题有两个:1、在开发的时候,修改代码后不需要重启应用就能看到效果,大大提升开发效率;2、生产上运行的程序,可以在不停止运行的情况......
  • php webhook excute that can pull code
      <?phpexec('whoami2>&1',$res);var_dump($res);exec('cd'.dirname(__FILE__).'/../&&sudogitpulloriginmaster2>&1',$res,$rc);var_dump($rc);if($rc==0){echo'部署成功<br&g......