css移动端

news/2024/11/22 19:54:41/

目录

谷歌模拟器

屏幕分辨率

视口

二倍图

适配方案

rem

简介

问题

媒体查询

移动端

设备宽度不同,HTML标签字号设置多少合适

flexible.js

rem-移动端适配

less

注释

运算

嵌套

变量

导入

导出

禁止导出


谷歌模拟器

模拟移动设备,方便查看页面效果

                                      

屏幕分辨率

分类:

- 物理分辨率:硬件分辨率(出厂设置)
- 逻辑分辨率: 软件/驱动设置

结论:制作网页参考 逻辑分辨率

视口

 

 

作用:显示HTML网页的区域,用来约束HTML的尺寸

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 视口标签 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

width=device-width 视口宽度 = 设备宽度

initial-scale=1.0 缩放1倍(不缩放)

二倍图

概念:设计稿里面每个元素的尺寸的倍数

作用:防止图片在高清分辨率屏幕下模糊失真

 

适配方案

  • 宽度适配:宽度自适应
    • 百分比布局
    • Flex布局
  • 等比适配:宽高等比缩放
    • rem
    • vm

rem

简介

  • rem单位,是相对单位
  • rem单位是相对于HTML标签的字号计算结果
  • 1rem = 1HTML 字号大小

问题

  • 手机屏幕大小不同,分辨率不同,如何设置不同的HTML标签字号
  • 设备宽度不同,HTML标签字号设置多少合适

媒体查询

  • 媒体查询能够检测是扣的宽度,然后编写差异化的css样式
  • 当某个条件成立,执行对应的css样式
@media(媒体特性){选择器{css属性}
}

移动端

  • 设备宽度大,元素尺寸大
  • 设备宽度小,元素尺寸小

设备宽度不同,HTML标签字号设置多少合适

目前rem布局方案中,将网页等分成 10 份,HTML标签的字号为视口宽度的 1/10

flexible.js

flexible.js是手淘开发出的一个用来适配移动端的 js 库

核心原理:根据不同的视口宽度给网页中html根节点设置不同的font-size

rem-移动端适配

书写代码尺寸要参照设计稿尺寸,设计稿是px还是rem

如何确定rem的数值呢?

N * 37.5 = 36  N = 36 / 37.5

  • 确定基准根字号
    • 查看设计稿的宽度---确定参考设备宽度(视口宽度)--->确定基准根字号(1 / 10视口宽度 )
  • rem 单位尺寸
    • rem单位的尺寸 = px单位数值 / 基准根字号

less

less是一个css预处理器,LESS文件后缀是.less,扩充了css语言,使css具备一定的逻辑性,计算能力

注意:浏览器不识别less代码,目前阶段,网页要引入对应的css文件

vscode插件,Easy LESS 保存less文件后自动生成对应的css文件

注释

  • 单行注释
    • //注释内容
    • ctrl+/
  • 块注释
    • /注释内容/
    • shift+alt+A

运算

  • 加,减,乘直接书写计算表达式
  • 除法需要添加小括号 或 .
  • 表达式存在多个单位以第一个单位为准
.box{width: 100+50px;height: 5*32px;width: (100/4px);height: 100 ./4px;
}

嵌套

作用:快速生成后代选择器

.父级选择器{//父级样式.子级选择器{//子级样式}
}

用&表示当前选择器,不会生成后代选择器,通常配合伪类或伪元素使用

.father{color: red;&:hover{color: green;}
}
--------------------------
.father {color: red;
}
.father:hover {color: green;
}

变量

概念:容器,存储数据

作用:存储数据,方便使用和修改

语法:

  • 定义变量: @变量名:数据;
  • 使用变量: css属性:@变量名;
// 定义变量
@myColor:pink;
// 使用变量
.box{color: @myColor;
}a{color: @myColor;
}

导入

作用:导入less公共样式文件

语法: @import '文件路径'

提示:如果是less文件可以省略后缀

@import './aa.less';
@import './bb';

导出

在less文件的第一行添加 // out:存储url

提示:文件夹名称后面添加

//out: ../css/index.css
//out: ../css/

禁止导出

在less文件第一行添加 //out:false


http://www.ppmy.cn/news/356730.html

相关文章

诚迈科技智能汽车软件产业峰会落幕,智达诚远峰昇操作系统FusionOS发布!

4月6日&#xff0c;由诚迈科技、智达诚远共同主办&#xff0c;苏州工业园区投资促进委员会协办&#xff0c;苏州工业园区智能网联产业促进会大力支持的中国&#xff08;苏州&#xff09;智能汽车软件产业峰会在苏州盛大举行。本次活动以“创新融合 聚力赋能”为主题&#xff0c…

Antv/L7中使用高德地图插件

L7可以使用高德地图作为底图&#xff0c;也可以使用高德地图提供的插件&#xff0c;如工具栏&#xff0c;缩放条等。 官方文档中的引入方式如下const sc new Scene({id: xxxx-map,logoVisible: false,map: new GaodeMap({style: default,pitch: 0,zoom: 13.056,plugin: [AMap…

高德地图——货车导航

高德地图——货车导航 插件&#xff1a;pluginAMap.TruckDriving 第一种方法&#xff1a;使用坐标&#xff0c;比驾驶和骑行多了city和size属性&#xff0c;且需要放入的是json数据 new AMap.TruckDriving({map:map,panel:panel,city:beijing,//城市size:1 //大小}).search(…

ECE8.1认证之路

ECE8.1认证之路 现在考试基本不需要发邮件说明要用中国 身份证考试和用deepl翻译软件&#xff0c;如果不放心也可以问&#xff0c;官方也会回复 1、购买考试资格(需要vxn) 点击 My Account 这个时候会让你登录&#xff0c;我用的是微软的账号登录 然后会让你填入一些基本信…

长沙与华为联合“打样”,湖南智能网联汽车加速跑出新局面

文丨智能相对论 作者丨陈选滨 智能网联汽车产业发展至今&#xff0c;在落地的过程中越来越考验一个地区的产业发展思路以及与市场企业的协同能力。 以长沙来说&#xff0c;目前其智能网联汽车产业在全国保持领跑态势。据赛迪顾问发布的《2020年中国智能网联汽车产业投资潜力…

E路航GPS LH900 使用

平台简介&#xff1a; OS: WinCE5.00, CPU: ARM926T,RAM&#xff1a; 51.5M, 4.3寸LCD&#xff0c;480x272 pixels, 65536 colors, 4G SD card 机器已经自带了很多软件&#xff0c;使用起来很方便。根据自己的需要&#xff0c;我又自己装了几个软件&#xff0c;简单记录一下。 …

长安车机升级公版高德

成品截图&#xff1a;工具箱支持锐程Plus\UNIV 一键操作&#xff0c;UNIT可以去除验证(无法删除原厂高德,因为路径不同) 成品连接&#xff1a;长安车机工具箱 密码:gogo 前言 各位工具箱的大佬&#xff0c;于我无关啊&#xff0c;莫名奇妙被点着名骂了&#xff0c;以前都是加…

车路协同信息交互技术要求第 1 部分:路侧设施与云控平台

团体标准-车路协同信息交互技术要求第 1 部分&#xff1a;路侧设施与云控平台 1 范围 本文件规定了车路协同系统中路侧计算单元、路侧单元与云控平台之间的信息交互内容及技术要求。 本文件适用于城市道路、公路和封闭园区车路协同系统中路侧设施、云控平台及其他相关系统的设…