移动 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 ...
随机推荐
- Codeforces Round #829 (Div. 2) D. Factorial Divisibility(数学)
题目链接 题目大意: \(~~\)给定n个正整数和一个数k,问这n个数的阶乘之和能不能被k的阶乘整除 既:(a\(_{1}\)!+a\(_{2}\)!+a\(_{3}\)!+....+a\(_{n}\ ...
- C. 连锁商店（状压dp）
C. 连锁商店 time limit per test 1 second memory limit per test 512 megabytes input standard input output ...
- docker支持ipv6
方法 方法一.Pv6地址 不为容器中的服务特别分配IPv6地址. 只要Docker把外部的IPv6地址端口映射到容器的IPv4端口上,随后访问主机的IPv6相应端口即可. 方法二.为Docker网络分 ...
- Dive into TensorFlow系列（1）-静态图运行原理
接触过TensorFlow v1的朋友都知道,训练一个TF模型有三个步骤:定义输入和模型结构,创建tf.Session实例sess,执行sess.run()启动训练.不管是因为历史遗留代码或是团队保守 ...
- Halcon使用MeasurePos来实现检测边缘点
(1)为了提高性能,测量句柄只需要初始化一次: 参数:测量矩形的中心点行坐标,测量矩形中心的列坐标,测量矩形的角度,测量矩形的宽,测量矩形的高,待处理图像的宽,待处理图像的高,使用的算法,输出测量句柄 ...
- 记一次spark数据倾斜实践
参考文章: 大数据项目--倾斜数据的分区优化 数据倾斜概念 什么是数据倾斜 大数据下大部分框架的处理原理都是参考mapreduce的思想:分而治之和移动计算,即提前将计算程序生成好然后发送到不同的 ...
- MySQL JDBC驱动版本与数据库版本的对应关系及注意事项
MySQL JDBC驱动版本与数据库版本的对应关系及注意事项 事情发生 学了三遍的servlet,经典老师又教的第一万遍登陆注册,并且让实现,并且让演示,我们老师可能和之前的小学期公司老师 完全没有沟 ...
- 如何禁止win7自动锁屏
前言 我是真的服了,就解决这个问题百度查了一大堆(浪费很长时间),都说是电源管理的问题,也不知道是谁抄谁的,改完还会自动锁屏. 然后我google一下子就解决了(这里有一个搜索技巧,就是将你的问题翻译 ...
- Gorm源码学习-创建行记录
1. 前言 Gorm源码学习系列 Gorm源码学习-数据库连接 此文是Gorm源码学习系列的第二篇,主要梳理下通过Gorm创建表的流程. 2. 创建行记录代码示例 gorm提供了以下几个接口来创建行记 ...
- nuxt.js中登录、注册（密码登录和手机验证码登录）
<!-- 登录弹框 --> <div class="mask" v-show="flag"> <div class="m ...