响应式布局基础知识详解
一、什么是响应式布局
响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。在移动互联网高度发达的今天,我们在桌面浏览器上开发的网页已经无法满足在移动设备上查看的需求。传统的开发方式是PC端开发一套页面,手机端再开发一套页面。但是这样做非常麻烦,随着不同的终端越来越多,你需要开发多个不同版本的页面。而使用响应式布局只要开发一套就够了。
二、基础知识
1、rem 单位
rem(rootem)是一个相对单位,类似于em,em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。
比如,根元素(html)设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px。
优点:可以通过修改HTML中size的大小,改变页面中所有元素的大小。
2、媒体查询
媒体查询(MediaQuery)是CSS3新语法。
使用@media查询,可以针对不同的媒体类型定义不同的样式@media可以针对不同的屏幕尺寸设置不同的样式。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、Android手机,平板等设备都用得到多媒体查询。
3、媒体查询的语法规范
(1)关键字:
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
and:可以将多个媒体特性连接到一起,相当于“且”的意思。 not:排除某个媒体类型,相当于“非”的意思,可以省略。 only:指定某个特定的媒体类型,可以省略。
(2)媒体类型的展示风格:
(3)示例:
4、引入资源
示例:
三、Less基础
1、维护css端(css的缺点)
(1)CSS是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。
(2)CSS需要书写大量看似没有逻辑的代码,CSS冗余度是比较高的。不方便维护及扩展,不利于复用。 CSS没有很好的计算能力
(3)非前端开发工程师来讲,往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。
2、Less的介绍
Less(LeanerStyleSheets的缩写)是一门CSS扩展语言,也成为CSS预处理器。
做为CSS的一种形式的扩展,它并没有减少CSS的功能,而是在现有的CSS语法上,为CSS加入程序式语言的特性。
它在CSS的语法基础之上,引入了变量Mixin(混入),运算以及函数等功能,大大简化了CSS的编写,并且降低了CSS的维护成本,就像它的名称所说的那样,Less可以让我们用更少的代码做更多的事情。
Less中文网址:http://lesscss.cn/
常见的CSS预处理器:Sass、Less、Stylus
3、Less的安装
(1)安装nodejs,可选择版本(8.0) ,网址:http://nodejs.cn/download/
(2)检查是否安装成功,使用cmd命令(win10是window+r打开运行输入cmd)---输入“node-v”查看版本即可
(3)基于nodejs在线安装Less使用cmd命令“npminstall-gless”即可
(4)检查是否安装成功,使用cmd命令“lessc-v”查看版本即可
4、Less的使用
先创建一个后缀为Less的文件,在该文件中编写Less语句
(1)编译
本质上,Less包含一套自定义的语法及一个解析器用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的CSS文件。
所以,我们需要把我们的less文件,编译生成为css文件,这样我们的html页面才能使用。
(2)变量
变量是指没有固定的值,可以改变的。因为我们CSS中的一些颜色和数值等经常使用。
变量命名规范:
a、必须有@为前缀 b、不能包含特殊字符 c、不能以数字开头 d、大小写敏感
示例:
(3)嵌套
(4)运算
注意:
(1)乘号(*)和除号(/)的写法
(2)运算符中间左右有个空格隔开1px + 5
(3)对于两个不同的单位的值之间的运算,运算结果的值取第一个值的单位如果两个值之间只有(4)一个值有单位,则运算结果就取该单位
5、vocode Less 插件 (重点)
Easy LESS,插件用来把less文件编译为 css文件
安装完毕播件,重新加我下vscode。
只要保存一下Less文件,会自动生成 CSS文件。
四、rem方案适配技术(市场主流)
(1)、技术方案1:
less
媒体查询
rem
(2)、技术方案2:
flexible.js rem
总结:
(1)两种方案现在都存在。
(2)方案2更简单,现阶段大家无需了解里面的js代码。
设计稿常见尺寸宽度:
1、技术一实现步骤:
(1) 动态设置html标签font-size大小
①假设设计稿是750px。
②假设我们把整个屏幕划分为15等份(划分标准不一可以是20份也可以是10等份)。
③每一份作为html字体大小,这里就是50px。
④那么在320px设备的时候,字体大小为320/15就是21.33px。
⑤用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的6比如我们以750为标准设计稿。
⑦一个100*100像素的页面元素在750屏幕下,就是100/50转换为rem是2rem*2rem比例是1比1
320屏幕下,html字体大小为21.33则2rem=4266px此时宽和高都是4266但是宽和高的比例还是1比1但是已经能实现不同屏幕下页面光素盒子等比例缩放的效果。
示例:
(2)、新建index.Less,将将设置有动态html标签font-size的Less文件导入
2、技术二实步骤:
(1)设置视口标签,引入格式化样式还有JS文件
(2)简洁高效的flexible.js
(3)下载插件。
(4)设置默认的html fone-size 将下图所示值改为默认的。
(5)当窗口大小超过了我们的设计窗口大小时 默认的html fone-size 就会改变,所以设置最大默认窗口。
响应式布局基础知识详解相关推荐
- CSS3 @media媒体查询 适配不同尺寸设备的响应式布局(清晰详解)
随着宽屏的不断普及,CSS3出现了@media媒体查询技术 一.了解@Media 相关知识 1.了解Media Queries Media Queries能在不同的条件下使用不同的样式,使页面在不同在 ...
- Flexible Box布局基础知识详解
1.基本概念,借用阮一峰老师的一张图: 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫 ...
- Python基础知识详解 从入门到精通(八)魔法方法
目录 Python基础知识详解 从入门到精通(八)魔法方法 什么是魔法方法 基础魔法方法(较为常用) 比较操作符 算数运算符 反运算(类似于运算方法) 增量赋值运算 一元操作符 类型转换 上下文管理( ...
- 网络管理之基础知识详解
网络管理之基础知识详解 目录 3.1 网络的特征 3.2 拓扑结构 4.1 OSI简介 4.2 数据传输过程 4.3 分层作用 4.4 PDU 5.1 单播 5.2 多播 5.3 广播 5.4 三种通 ...
- 工业相机基础知识详解
工业相机基础知识详解 工业相机是机器视觉系统的一个最关键的组件.他的功能很简单,就是将被检测的物体拍摄下来,然后转换成电脑可以识别的图像,以便以后进行图像处理,从而完成检测任务.工业相机俗称工业摄像机 ...
- 小白入门!网络安全基础知识详解(附知识问答)
小白入门!网络安全基础知识详解(附知识问答) 一.引论 提到网络安全,一般人们将它看作是信息安全的一个分支,信息安全是更加广义的一个概念:防止对知识.事实.数据或能力非授权使用.误用.篡改或拒绝使用所 ...
- 【BLE】OTA基础知识详解
[BLE]OTA基础知识详解 一. 概念 1. 缩写 BIM Boot Image Manager , the software bootloader CRC cyclic redundancy ch ...
- R语言基础知识详解及概括
R语言基础知识详解及概括 目录 R语言基础知识详解及概括 R数据可视化示例 R语言进行数据创建
- R语言可视化绘图基础知识详解
R语言可视化绘图基础知识详解 图形参数:字体.坐标.颜色.标签等: 图像符号和线条: 文本属性: 图像尺寸及边界: 坐标轴.图例自定义等: 图像的组合: #install.packages(c(&qu ...
- 计算机网络相关知识 参考博客 子网掩码怎么理解 网关及网关的作用 路由器基础知识详解
子网掩码怎么理解 https://blog.csdn.net/farmwang/article/details/64132723 网关及网关的作用 https://blog.csdn.net/zhao ...
最新文章
- 用Python进行诗歌接龙
- 2012年08月13日
- Anaconda:成功解决利用conda下载pytorch和torchvision时速度超慢的问题
- Iptables Layer7禁止QQ、MSN、p2p软件(解决iptable 无法启动)
- 避免内存泄漏 - C++快速入门38
- android源码出现的@字符代表什么意思
- C语言子程序调用的入口参数和出口参数,C语言与DOS系统接口技术
- android游戏boss坐标,混沌与秩序2已知boss刷新点分布图详解(已更新到20号boss)...
- 单片机C语言,从小白到菜鸟进阶教程(超详细代码解读)
- 3dmax导出fbx事项注意
- 最长山脉 python
- Python——程序设计:商贷月供计算器
- 用python画星空-用Python画一个超级月亮
- 计算机控制键有哪些,常用的电脑快捷键大全有哪些
- android egl 代码,Android配置EGL环境
- Notification使用举例
- KEIL MDK中的RO、RW和ZI
- android应用和苹果,同一款软件,在安卓和苹果间差别原来这么大
- 0906期特别策划——“架构师大阅兵”
- Linux与Fedora
热门文章
- 用prototype 方法$A() uncheck radio button
- 批量合并工作簿,包含三种合并方式,Excel技能演示
- 基于STM32(F103ZE)的LD3320语音控制系统
- python使用matplotlib可视化线图(line plot)、使用semilogy函数将Y轴数据处理为对数坐标(logarithmic scale in Matplotlib)
- Riemann问题精确解及程序实现
- vue网页调用高德获取经纬度
- 【idea使用】主题文字修改
- 方法重写与方法重载的区别
- 北海屠龙记------十三
- c语言汉字属于什么类型_带你学习C语言—数据类型