移动 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 ...
随机推荐
- vue 数组更新（push【可用】，$set，slice,filter,map【都属于浅拷贝】）问题
this.$axios.post('https://....php',this.$qs.stringify({ user: 'suess' })) .then(res => { this.dat ...
- Redis Cluster 数据分片
介绍 Redis Cluster Redis 集群是 Redis 提供的分布式数据库方案, 集群通过分片(sharding) 来进行数据共享, 并提供复制和故障转移功能. 节点 一个 Redis 集群 ...
- Go语言核心36讲45
你好,我是郝林,我今天继续分享bufio包中的数据类型. 在上一篇文章中,我提到了bufio包中的数据类型主要有Reader.Scanner.Writer和ReadWriter.并着重讲到了bufio ...
- hashlib加密模块、加密补充说明、subprocess模块、logging日志模块
目录 hashlib加密模块 加密补充说明 subprocess模块 logging日志模块 日志的组成 日志配置字典 hashlib加密模块 1.何为加密 将明文数据处理成密文数据 让人无法看懂 2 ...
- 《HelloGitHub》第 80 期
兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣.入门级的开源项目. https://github.com/521xueweiha ...
- 错误：Required request parameter 'XXX' for method parameter type String is not present
错误信息:Required request parameter 'XXX' for method parameter type String is not present 这种都是前端请求方式不同,后 ...
- 基于人人框架--本地项目部署流程（前后端+IIS上传功能）
基于人人框架--本地项目部署流程(前后端+IIS上传功能) 一.环境要求 JAVA环境 JDK:1.8 IIS 本地电脑必须要有IIS服务 MySQL 数据库采用MySQL数据库,安装版本为 5.7. ...
- 同步异步、mutiprocessing创建进程process模块及进程对象的多种方法、消息队列Queue
目录 同步异步 阻塞与非阻塞 综合使用 创建进程的多种方式之multiprocess.process模块 进程间数据隔离 进程的join方法 IPC机制 生产者 消费者模型 进程对象的多种方法 守护进 ...
- 周结之json补充、正则re模块、hashlib模块、logging模块
周结 目录 周结 json补充 正则表达式 re模块 第三方模块的下载 request模块 办公自动化openpyxl模块 hashlib加密模块 subprocess模块 logging日志模块 j ...
- uniapp 微信小程序 实现左侧菜单右侧列表，双向联动的效果
<template> <view class="u-wrap"> <view class="u-search-box"> & ...