移动 WEB 开发布局方式 ---- rem 适配布局
一、rem 基础
1. rem 单位
em :
相对于父元素的字体大小来说的
<div>
<p></p>
</div>
div {
font-size: 12px;
}
p {
width: 10em;
height: 10em;
background-color: pink;
}
rem:
相对于 html 元素字体大小来说的
html {
font-size: 16px;
}
div {
font-size: 12px;
}
p {
/*width: 10em;*/
/*height: 10em;*/
width: 10rem;
height: 10rem;
background-color: pink;
}
总结：rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小，页面中元素大小可以控制
二、媒体查询
2.1 什么是媒体查询
2.2 语法规范
1. mediatype 媒体类型
2. 关键字
3. 媒体特性
栗子：
<style>
/*这句话的意思就是：在我们屏幕上，并且 最大的宽度是 800像素 设置我们想要的样式*/
/*max-width 小于等于800*/
/*媒体查询可以根据不同的屏幕尺寸在改变不同的样式*/
@media screen and (max-width: 900px){
body{
background-color: pink;
}
}
@media screen and (max-width: 600px) {
body{
background-color: purple;
}
}
</style>
栗子2：根据页面宽度改变页面背景颜色
<style>
/*1. 小于 540 px 页面的背景变为蓝色*/
@media screen and (max-width: 539px){
body{
background-color: blue;
}
}
/*2. 540~970 页面的背景变成绿色*/
/*@media screen and (min-width: 540px) and (max-width: 969px) {*/
/* body {*/
/* background-color: green;*/
/* }*/
/*}*/
/*简写为：*/
@media screen and (min-width: 540px){
body{
background-color: green;
}
}
/*3.大于等于 970 页面背景变成红色 */
@media screen and (min-width:970px){
body{
background-color: red;
}
}
</style>
2.3 媒体查询 + rem 实现元素动态变化
栗子：
<style>
*{
margin: 0;
padding: 0;
}
@media screen and (min-width: 320px) {
html{
font-size: 50px;
}
}
@media screen and (min-width: 640px){
html{
font-size: 100px;
}
}
.top {
height: 1rem;
font-size: 0.5rem;
background-color: deeppink;
color: #ffffff;
text-align: center;
line-height: 1rem;
}
</style>
<body>
<div class="top">购物车</div>
</body>
2.4 引入资源
1 .语法规范
栗子：
需求：当我们屏幕大于等于 640px 以上的，我们让 div 一行显示 2 个
当我们屏幕小于 640 我们让div一行显示一个
建议媒体查询最好的方法是从小到大
<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">
<body>
<div>1</div>
<div>2</div>
</body>
style320.css
div {
width: 100%;
height: 100px;
}
div:nth-child(1){
background-color: pink;
}
div:nth-child(2){
background-color: purple;
}
style640.css
div {
width: 50%;
height: 100px;
float: left;
}
div:nth-child(1){
background-color: pink;
}
div:nth-child(2){
background-color: purple;
}
总结：引入资源就是 针对不同的屏幕尺寸 调用不同的 CSS 文件
三、Less 基础
3.1 Less作用（维护 css 的弊端）
3.2 Less介绍
3.3 Less 使用
3.4 Less 变量
栗子：
//定义一个颜色为粉色的变量
@color:pink;
//定义一个 字体为141像素的变量
@font14:14px;
body {
background-color: @color;
}
div {
background-color: @color;
font-size: @font14;
}
a{
font-size: @font14;
}
注意：
错误的变量名 @1color @color~#
变量名区分大小写 @color 和 @Color 是两个不同的变量
3.5 Less 编译
vocode Less插件
Easy LESS 插件用来把 less 文件编译成 css 文件
- 安装完毕插件，重新下载下 vscode
- 只要保存一下 Less 文件，会自动生成CSS 文件
- 当修改 my.less 保存的时候 ，my.css 会自动的去修改
栗子：
my.less
//定义一个颜色为粉色的变量
@color:pink;
//定义一个 字体为24像素的变量
@font14:24px;
//错误的变量名 @1color @color~#
//变量名区分大小写 @color 和 @Color 是两个不同的变量
body {
background-color: @color;
}
div {
background-color: @color;
font-size: @font14;
}
21.less的使用.html
<link rel="stylesheet" href="my.css">
<body>
<div>谁还不是一个小仙女呢！</div>
</body>
3.6 Less 嵌套
- 选择器的嵌套
栗子：
less文件
.header {
width: 200px;
height: 200px;
background-color:pink;
// less嵌套 子元素的样式直接写到父元素里面即可
a {
color: red;
}
}
被编译成css文件如下
.header {
width: 200px;
height: 200px;
background-color: pink;
}
.header a {
color: red;
}
- 交集、伪类、伪元素选择器的嵌套
伪类栗子：
less文件
.header {
width: 200px;
height: 200px;
background-color:pink;
a {
color: red;
&:hover {
color: blue
}
}
}
被编译成css文件如下
.header {
width: 200px;
height: 200px;
background-color: pink;
}
.header a {
color: red;
}
.header a:hover {
color: blue;
}
伪元素栗子：
less 文件
.nav {
.logo{
color: red;
}
&::before{
content: "";
}
}
被编译成css 文件如下
.nav .logo {
color: red;
}
.nav::before {
content: "";
}
3.7 Less 运算
栗子1：
less文件
@border:5px + 5;
div {
width: 200px - 50;
height: 200px * 2;
border:@border solid red
}
img {
width:82 / 50rem;
height: 82 / 50rem;
}
css 文件
div {
width: 150px;
height: 400px;
border: 10px solid red;
}
img {
width: 1.64rem;
height: 1.64rem;
}
栗子2：
less文件
@baseFont:50px;
html{
font-size: @baseFont;
}
img {
width: 82rem / @baseFont;
height: 82rem / @baseFont;
}
css 文件
html {
font-size: 50px;
}
img {
width: 1.64rem;
height: 1.64rem;
}
总结：
1.运算符的左右两侧必须用空格隔开
2. 两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准
3. 两个数参与运算，如果两个数都有单位，并且单位不一致，则最后的结果以第一个数的单位为准
注意：
颜色也可以参与运算，比如
less文件
background-color:#666 - #222
css 文件：
background-color:#444
四、 rem 适配方案
4.1 rem 实际开发适配方案
4.2 rem 适配方案技术使用（市场主流）
4.3 rem 实际开发适配方案一
rem + 媒体查询 + less
1. 设计稿常见尺寸宽度
2. 动态设置html 标签 font-size 大小
栗子：
<style>
*{
margin: 0;
padding: 0;
}
@media screen and (min-width:320px){
html{
font-size: 22px;
}
}
@media screen and (min-width:750px){
html{
font-size: 50px;
}
}
div {
width: 2rem;
height: 2rem;
background-color:pink;
}
</style>
</head>
<body>
<div></div>
</body>
大屏下宽和高是 100px * 100px的
小屏下宽和高是 44px * 44px的
达到等比例缩放的效果
3. 元素大小取值的计算方法
总结：
原型大小的盒子 就是页面元素值： 100px * 100px
屏幕宽度：750px
划分的份数：15等份
屏幕宽度 / 划分的份数 就是 html font-size 的大小 = 750 / 15 = 50
页面元素的 rem值 ： 100 / 50 = 2rem
五、苏宁首页案例制作
https://www.cnblogs.com/Chinatsu/p/14130701.html
六、rem 适配方案二
6.1 简洁高效的 rem 适配方案 flexible.js
6.2 使用 rem 适配方案二制作苏宁移动端首页
https://www.cnblogs.com/Chinatsu/p/14130714.html
移动 WEB 开发布局方式 ---- rem 适配布局的更多相关文章
- 移动web开发之rem适配布局
移动web开发之rem适配布局 方案: 页面布局文字能否随着屏幕大小变化而变化 流式布局和flex布局主要针对于宽度布局,那高度如何布局? 怎样让屏幕发生变化的时候元素高度和宽度等比例缩放? 1. r ...
- Web开发中常用的定位布局position
定位布局就是为开发提供了更好的布局方式,可以根据需求给相应的模块设定相应位置,从而使界面更佳丰富,代码更佳完美. position是CSS中非常重要的一个属性,通过position属性,我们可以让元素 ...
- rem适配布局（rem+less+媒体查询 和 rem+flexible.js）
1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素 的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以 ...
- web开发中移动端适配
这个话题有些复杂,说起来有些琐碎,因为和移动端适配相关的问题太多了. 1. 概念 1.1 设备像素 设备像素被称为物理像素,它是显示设备中一个最小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮 ...
- CSS常用布局方式-两列布局、三列布局
CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...
- 移动 WEB 开发的布局方式 ---- 响应式布局
一.响应式简介 一个页面布局兼容了 PC端 ,iPad端 和 移动端 所谓的响应式就是页面中的布局会随着屏幕的大小变化发生了响应而做出不同的页面布局模型 特点: 响应式布局是不需要单独写移动端页面的 ...
- PostCSS的插件 -- 关于vue rem适配布局方案
PostCSS的插件 作用:用于自动将像素单元生成rem单位 记以下三种 postcss-plugin-px2rem postcss-pxtorem postcss-px2rem 任选一种,最近大家推 ...
- 移动端rem适配布局
dome如下: <!doctype html><html><head> <meta charset="UTF-8" /> <m ...
- 【Web开发】一、页面布局
一.Frame <frameset id="topFrameSet" rows="69,*" border="0" framespac ...
- 【Spring】web开发 javaConfig方式 图解
spring3.2之后开始支持java配置方式开发web项目,不使用web.xml,但需要在servlet3.0环境,一般tomcat7会支持,6不行 下图中:MyAppInitializer和Spr ...
随机推荐
- 第2-1-4章 SpringBoot整合FastDFS文件存储服务
目录 5 SpringBoot整合 5.1 操作步骤 5.2 项目依赖 5.3 客户端开发 5.3.1 FastDFS配置 5.3.2 FastDFS配置类 5.3.3 文件工具类 5.3.4 文件上 ...
- clickhouse在风控-风险洞察领域的探索与实践
一.风险洞察平台介绍 以Clickhouse+Flink实时计算+智能算法为核心架构搭建的风险洞察平台, 建立了全面的.多层次的.立体的风险业务监控体系,已支撑欺诈风险.信用风险.企业风险.小微风险. ...
- SQLSever事务
1. 为什么要使用事务? 当一个存储过程或多个SQL语句(指代insert.update.delete类型)依次执行时候, 如果其中一条或几条发生错误,但是其他的还会继续执行,会造成数据的不一致,非常 ...
- Ian Lance Taylor
https://img.mukewang.com/5a9dfda50001933e23006728.png 在GCC的世界中,没有人比Ian更火.在GCC maillist中,Ian的身影呈现在前端中 ...
- DHorse系列文章之maven打包
插件打包 这种方式是平时最常用的,首先要下载并安装maven环境,然后在被打包的项目中引入插件,有各种各样的打包插件,比如springboot自带插件: <plugin> <grou ...
- 2022-2023年度必备宇宙最全Windows系统软件清单
作为PC端的第一生产力工具,相信对于绝大部分人来说,Windows系统是一款不可替代的产品.既然如此,Pytrick今天就拿出珍藏多年的压箱底宝贝无偿分享给各位,给大家逐一介绍下这些体验一级棒的应用软 ...
- 同一服务器部署多tomcat以及MyEclipse添加多tomcat
tomcat有很多版本但他们的部署方式并不因为版本的不同而改变其的部署方式,操作者不必考虑此等原因.本人办公电脑使用的是tomcat7,家里自用的是6版本,这里就以6版本为例实现同一台机器上部署多to ...
- 【每日一题】【DFS&每个点都调用一次前后左右】由1连接的岛屿数量-211031/220216
给你一个由 '1'(陆地)和 '0'(水)组成的的二维网格,请你计算网格中岛屿的数量. 岛屿总是被水包围,并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成. 此外,你可以假设该网格的四条边 ...
- 【实时数仓】Day04-DWS层业务：DWS设计、访客宽表、商品主题宽表、流合并、地区主题表、FlinkSQL、关键词主题表、分词
一.DWS层与DWM设计 1.思路 之前已经进行分流 但只需要一些指标进行实时计算,将这些指标以主题宽表的形式输出 2.需求 访客.商品.地区.关键词四层的需求(可视化大屏展示.多维分析) 3.DWS ...
- PHP7.2 装mongodb 遇到的坑，完美解决！
公司要做QA安全测试,组长就丢了一个源码包给我,什么资料都无. 系统是个Laravel框架,源码都是从线上git下来.然后看了本地composer.json 没有生成vendor 第一步安装 comp ...