前端--移动端--3移动web开发rem适配布局

news2024/9/24 7:23:44

目标: 

·能够适应rem单位

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

·能够使用less的基本语法

·能够使用less中的嵌套

·能够使用less中的运算

·能够使用2种rem适配方案

·能够独立完成苏宁移动端首页

目录:

·rem基础

·媒体查询

·less基础

·rem适配方案

·苏宁首页案例制作

方案?

1.页面布局文字能否随着屏幕大小变化而变化?

2.流式布局和flex布局主要针对宽度布局,那高度如何设置?

3.怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放?

1.rem基础

rem单位

rem(root em )是应该相对单位,类似于em,em是父元素字体大小。

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

比如,根元素(html) 设置font-size=12px,非根元素设置width:2rem;则换成px表示就是24px。

rem的优点:可以通过修改html里面的文字大小来改变页面中元素的大小,使得可以整体控制。

那我可以在不同的设备里面去修改html字体大小,这样我页面里的元素就可以跟着一起来变化,但是有一个问题,但是我现在html字体大小是写死了,那怎么样才能实现动态变化,使得根据不同的屏幕尺寸去修改html的文字大小呢?

2.媒体查询

2.1 什么是媒体查询

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

·使用@madia查询,可以针对不同的媒体类型定义不同的样式

·@madia可以针对不同的屏幕尺寸设置不同的样式

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

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

2.2 语法规范

@media mediatype and|not|only (madia feature) {

            CSS-Code;

}

·用@maida开头注意符号@

·madiatype 媒体类型

·关键字 and not only

·media feature 媒体特性 必须有小括号包含

1.mediatype查询类型

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

解释说明
all用于所有的设备
print用于打印机和打印预览
scree用于电脑屏幕,平板电脑,智能手机等

2.关键字

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

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

·not:排除某个媒体类型,相当于“非”的意思,可以省略

·only:指定某个特定的媒体类型,可以省略

3.媒体特性

每种媒体类型都具有各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。注意他们要加小括号包含。

解释说明
width定义输出设备中页面可见区域的宽度
min-width定义输出设备中页面最小可见区域宽度
max-width定义输出设备中页面最大可见区域宽度

注意:为了防止混乱,媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写,这样代码更简洁

注意我们最大值max-width和最小值min-width都是包含等于的。

注意我们数字后面必须跟单位px

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

rem单位是跟着html来走的,有了rem页面元素可以设置不同大小尺寸。

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

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

案例:媒体查询+rem实现元素动态大小变化

2.4 引入资源(了解) 

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

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

就是针对不同的屏幕尺寸,调用不同的CSS文件

1.语法规范

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

3.Less 基础

3.1维护CSS的弊端 

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

·CSS需要书写大量看似没有逻辑的代码,CSS冗余度是比较高的。

·不方便维护及扩展,不利于复用。

·CSS没有很好的计算能力。

·非前端开发工程师来讲,往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。

3.2 Less 介绍

Less是一门CSS扩展语言,也成为CSS预处理器。作为CSS的一种形式的扩展,它并没有减少CSS的功能,而是在现有的CSS语法上,为CSS加入程序式语言的特性。

它在CSS的语法基础上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了CSS的编写,并且降低了CSS的维护成本,就像它的名称所说的那样,Less可以让我们用更少的代码做更多的事情。

Less中文网址:http://lesscss.cn/

常见的CSS预处理器:Sass、Less、Stylus

一句话:Less是一门CSS预处理语言,它扩展了CSS的动态特性。

Less使用:

我们首先新建一个后缀名为less的文件,在这个less文件里面书写less语句。

·less变量

·less编译

·less嵌套

·less运算

3.4 Less 变量

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

@变量名:值;

1.变量命名规范

·必须有@为前缀

·不能包含特殊字符

·不能以数字开头

·大小写敏感

3.5 Less 编译 

本质上,less包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的CSS文件。

所以,我们需要把我们的less文件,编译生成为css文件,这样我们的html页面才能使用。

vocode less 插件,可以把less文件编译为css文件。

3.6 Less 嵌套

我们经常用到选择器的嵌套,css都是这样写:

.header .logo {

    width:300px;

}

less 嵌套写法:

.header {

       .logo {

           width:300px;

      } 

}

如果遇见(交集|伪类(比如:hover)|伪元素选择器)

·内层选择器的前面没有&符号,则它被解析为父选择器的后代;

·如果有&符号,它就被解析为父元素自身或父元素的伪类。

less 嵌套写法:

a {

    // 如果有伪类、交集选择器、伪元素选择器 我们内层的前面需要加&

        &:hover {

            color: blue;

        }

  }

3.7 Less 运算(重要)

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

注意:

 ·乘号(*)和除号(/)的写法

·运算符中间左右有个空格隔开,如:1px + 5

·对于两个不同的单位的值之间的运算,运算结果的值取第一个值的单位

·如果两个值之间只有一个值有单位,则运算结果就取该单位

思考:

rem适配方案

1.我们适配的目标是什么?

让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备。

2.怎么去达到这个目标的?

使用媒体查询 根据不同设备 按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化元素尺寸也会发生变化,从而达到等比缩放的适配。

即屏幕尺寸变化的时候,因为用媒体查询那html的字体大小就随之变化,又因为用rem做尺寸单位,所以各盒子的高宽、字体的大小等就随html的字体大小的变化而变化。

3.在实际的开发当中使用?

4.rem适配方案

4.1 rem 实际开发适配方案

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

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

4.2 rem 适配放啊技术使用(市场主流)

技术方案1

·less

·媒体查询

·rem

技术方案2(推荐)

·flexible.js

·rem

总结:

1.两种方案现在都存在

2.方案2更简单,不过现阶段我们无需了解里面的js代码,还没学嘛

4.3 rem实际开发适配方案1

rem+媒体查询+less技术

1.技术稿常见尺寸宽度

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

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

3.元素大小取值方法

①最后的公式:页面元素的rem值=页面元素值(px)/(屏幕宽度/划分的份数)

②屏幕宽度/划分的份数就是html font-size 的大小

③或者:页面的元素的rem值=页面元素值(px) / html的字体大小font-size

简单来说就是:

每个屏幕尺寸的font-szie怎么算?

font-size = 自身px(屏幕尺寸) / 划分次数

然后,每个屏幕尺寸的rem怎么算?

rem = 自身px(屏幕尺寸) / font-size

还有,每个盒子高度随着不同屏幕尺寸也是会变的,那怎么算高度?

也是上面的公式,rem = 自身px(设计稿中该盒子高度) / font-size

1.首先我们选一套标准尺寸 750为准

2.我们用屏幕尺寸 除以 我们划分的等级 得到了 html 里面的文字大小,都是我们知道不同屏幕下达到的文字大小是不一样的

3.页面元素的rem值 = 页面元素的px值 / html里面的文字大小

案例:苏宁易购案例

1.技术方案1

 

  

 

 

小笔记:

①设计稿给我们的是750px,我们就照着750写死750对应的rem单位的宽高就行,最后到不同的屏幕下它会自己适应调整的。

②固定定位的盒子势必有宽度

③定位的值想居中或者垂直居中,不能用margin哟,只能用定位里面的top,left。

再复习一下定位里怎么垂直居中:

top: 50%; left: 50%; 这时候的50%是相对父盒子哟,这时候还不是垂直居中哟反而是偏右下。

所以还需要再走自身宽度高度的一半,怎么才能走自身高宽的一半呀?用transform,transform是对自身来说的。

用transform : translateX(-50%)  translateY(-50%);

④// 去除搜索框自带的边框

            outline: none;

⑤图片属于行内元素,不能直接让它margin居中对齐,得先转换为块级元素才可以

2.技术方案2

 

 

  

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/452491.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何修改AS2接收的文件名?

知行之桥EDI系统的AS2端口&#xff0c;负责接收和发送EDI文件。企业通过AS2端口接收来自交易伙伴的文件时&#xff0c;其文件名会和交易伙伴发出的文件名完全一致&#xff1b;如果交易伙伴发过来的请求中没有文件名或者文件名没有出现在AS2 协议规定的位置&#xff0c;AS2端口会…

K_A33_001 基于STM32等单片机驱动RC522射频卡 读写IC卡 串口显示

K_A33_001 基于STM32等单片机驱动RC522射频卡 读写IC卡 串口显示 所有资源导航一、资源说明二、基本参数参数引脚说明 三、驱动说明时序:对应程序: 四、部分代码说明1、接线引脚定义1.1、STC89C52RCRC522射频模块1.2、STM32F103C8T6RC522射频模块 五、基础知识学习与相关资料下…

Django分页+增删改查

Django分页增删改查 演示 源码下载地址&#xff1a;https://download.csdn.net/download/qq_35622606/87719248 其他小笔记&#xff1a; django-admin.exe startproject mysite python .\manage.py startapp app01 python manage.py makemigrations python manage.py migrate…

Docker系列---Docker Compose | 容器编排 | 理论详解

目录 1.Docker Compose 概述&#xff08;YML&#xff09; 2.Docker Compose 安装 3.Docker Compose 配置常用字段 4.Docker Compose 常用命令 5.基于 Compose 创建 镜像 1.首先安装好Compose 2.使用Dockerfile环境&#xff1a; 1.Docker Compose 概述&#xff08;YML&am…

docker + K8S + Rancher + Harbor的安装

docker K8S Rancher Harbor的安装 1. 系统初始化 关闭防火墙 systemctl stop firewalld禁用防火墙开机自启 systemctl disable firewalld永久-关闭selinux sed -i s/enforcing/disabled/ /etc/selinux/config # 重启 reboot关闭swap分区 # 永久 sed -ri s/.*swap.*/#&/…

重启电脑数据丢失怎么恢复?这篇指南很受用!

案例分享&#xff1a;“你好&#xff0c;我重新启动了我的win10电脑&#xff0c;电脑为什么再次开机后&#xff0c;下载的软件就不见了&#xff1f;不仅如此&#xff0c;我的文档也消失不见了&#xff0c;这令我很困惑。请问重启电脑数据丢失怎么恢复&#xff1f;请大家帮帮我&…

系统分析师考试,信息安全常错题

计算机网络---其他 Stub区域是一种比较特殊的区域&#xff0c;因为它不能像其他区域那样&#xff0c;经过该区域中的ABR接收其他OSPF AS路由。在Stub区域的内部路由器仅需要配置一条到达该区域ABR的默认路由&#xff08;0.0.0.0.0.0.0.0&#xff09;来实现与同一AS中不同区域间…

CloudCompare插件开发之如何设计界面ui与功能实现?

文章目录 0.引言1.使用文件说明2.添加界面ui相关文件到插件目录3.修改工程相关文件并生成4.结果展示 0.引言 CloudCompare源代码编译成功后&#xff0c;即可进行二次开发&#xff0c;可通过修改源码实现二次开发基础功能&#xff08;见&#xff1a;CloudCompare如何进行二次开发…

#mysql binlog 备份恢复数据流程#

模式&#xff1a;mysql全量备份binlog日志完整恢复数据 首先&#xff0c;数据库在误操作之前必须已经开启了binlog日志功能&#xff0c;且binlog日志的保存周期必须大于全备份的时间周期&#xff01; 所谓恢复&#xff0c;就是让将全备份的数据全部恢复后&#xff0c;再使用my…

HTB-Time

HTB-Time 信息收集80端口 立足pericles -> root 信息收集 80端口 有两个功能&#xff0c;一个是美化JSON数据。 一个是验证JSON&#xff0c;并且输入{“abc”:“abc”}之类的会出现报错。 Validation failed: Unhandled Java exception: com.fasterxml.jackson.core.JsonPa…

当⻉借⼒阿⾥云落地云原⽣架构转型,运维降本、效率稳定性双升

作者&#xff1a;当贝技术团队 随着业务飞速发展&#xff0c;当贝的传统 IT 资产也渐显臃肿&#xff0c;为了避免制约发展的瓶颈&#xff0c;痛定思痛&#xff0c;技术团队果断变革&#xff1a;核心业务云原生化之后&#xff0c;运维效率、整体稳定性和研发效率均得到了全面提…

网络基础知识

网络基础知识 一、什么是二层互通与三层互通&#xff1f;1.1 二层网络互通1.2 三层网络互通 二、什么是Overlay网络&#xff1f;2.1 Underlay网络2.2 Overlay网络2.3 Underlay网络 vs Overlay网络 三、什么是SNMP&#xff1f;3.1 SNMP概念3.2 为什么需要SNMP&#xff1f;3.3 SN…

基于ubuntu18.04.6 LTS服务器安装nvidia驱动

1对于一个刚刚配置的服务器&#xff0c;首先nvidia-smi&#xff0c;自然无法显示Driver Version、最高cuda版本等信息。 nvidia-smi: command not found 需要我们自己安装nvidia驱动 2禁用老驱动 禁用自带nouveau驱动 sudo vim /etc/modprobe.d/blacklist.conf 打开后在CONF文…

本地配置nacos例子

nacos的加载顺序 0、application.properties 1、bootstrap.properties 2、bootstrap-{profile}.properties #本地启动 nacos的配置文件的生成规则&#xff0c;当我正常启动项目时 nacos的配置文件名字生成规则为 ${spring.application.name}.yaml spring:application:name…

面试redis之两大金刚,你懂吗

前言 Redis持久化&#xff0c;一个老掉牙的问题&#xff0c;但是面试官就是喜欢问。这也是我们学Redis必会的一个知识点。Redis作为内存数据库&#xff0c;它工作时&#xff0c;数据都保存在内存里&#xff0c;这也是它为什么很快的一个原因。但存到内存里肯定是有丢数据的风险…

为什么我们能判断声音的远近

想象一下&#xff0c;当我们走在路上时&#xff0c;听到了头顶的鸟儿在树梢间的叫声&#xff0c;即使无法透过浓密的树叶看见它&#xff0c;也可以大致知道鸟儿的距离。此时身后传来由远到近自行车铃铛声&#xff0c;我们并不需要回过头去看&#xff0c;便为它让开了道路。这些…

查找文件路径——whereis、which、locate、find命令

目录标题 whereis命令——通过环境变量查找所有文件&#xff08;包括可执行文件&#xff09;which命令——查找系统命令文件与whereis命令区别 locate命令——全局搜索find命令&#xff08;全盘搜索&#xff09;find命令中的参数及作用按照文件名搜索按照文件大小搜索按照修改时…

离散数学-考纲版-02-谓词

文章目录 2. 谓词参考2.1 命题2.1 个体谓词和量词2.1.1 个体2.1.2 谓词2.1.3 量词引入个体域符号化量词真值确定谓词符号化举例示例一示例二示例三示例四 2.3谓词合式公式2.3.1 四类符号2.3.2 项2.3.3 合式公式 2.4 自由变元与约束变元2.4.1 定义2.4.2 判定2.4.3 两个规则2.4.4…

【京东】商品详情页+商品列表数据采集

作为国内最大的电商平台之一&#xff0c;京东数据采集具有多个维度。 有人需要采集商品信息&#xff0c;包括品类、品牌、产品名、价格、销量等字段&#xff0c;以了解商品销售状况、热门商品属性&#xff0c;进行市场扩大和重要决策&#xff1b; 有人需要采集产品评论&…

Android OpenGL 渲染相机预览画面显示体系

OpenGL能进行高效得渲染图形图像&#xff0c;并支持各种复杂的特效和动画。 而在 Android 当中&#xff0c;运用的是OpenGL ES&#xff0c;它是OpenGL的一个轻量级版本&#xff0c;专门用于在移动设备、游戏控制台、嵌入式系统等嵌入式环境中使用。 它可以做相机滤镜或者图片…