移动 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 ...
随机推荐
- created与mounted执行顺序（关于微任务与宏任务）
1.ps:只要你只使用created或者mounted中的一个不就好了吗[dog].这样只要在第一个异步任务代码跳出前,嵌套第二个任务函数就好了 最后面的两个链接一个是微任务与宏任务的通俗例子,一个是 ...
- 抠网页标题栏logo（图标）
1.打开自己需要抠的网页,例如百度页面 2.在这个网页链接后面+" /favicon.ico " 就可以提取ico图片 3.回车进去,右键鼠标,选择另存为图片就可以成功保存网页中的 ...
- 修改input标签里面的提示文字（placeholder）的样式
使用 ::-webkit-input-placeholder 伪类 input::-webkit-input-placeholder{ // 修改字体大小 font-size:12px; // 修改文 ...
- 【云原生 · Kubernetes】Kubernetes基础环境搭建
1.系统镜像 安装运行环境系统要求为CentOS7.5,内核版本不低于3.10. CentOS-7.5-x86_64-DVD-1804.iso Chinaskill_Cloud_PaaS.iso Do ...
- 1759D(数位变0）
题目链接 题目大意: 给你两个整数n, m.你需要求一个数,它满足如下条件: 是n的整数倍,且倍数小于m. 你应该使其末尾的0尽可能的多(如100后面有2个零,1020后面有一个零,我们应该输出100 ...
- js 传递路径参数到后台的转码和解码
在开发中遇到前端页面需要将一个附件的路径传递后台实现业务逻辑,但不进行编码一直报404的错误,上代码. 前端编码:JavaScript函数encodeURL() 说明:1 .encodeURL函数主要 ...
- Golang反射获得变量类型和值
1. 什么是反射 反射是程序在运行期间获取变量的类型和值.或者执行变量的方法的能力. Golang反射包中有两对非常重要的函数和类型,两个函数分别是: reflect.TypeOf 能获取类型信息re ...
- 一个小时，200行代码，手写Spring的IOC、DI、MVC
一.概述 配置阶段:主要是完成application.xml配置和Annotation配置. 初始化阶段:主要是加载并解析配置信息,然后,初始化IOC容器,完成容器的DI操作,已经完成HandlerM ...
- 9V,12V输入充3.7V单节锂电池电路和芯片
锂电池充电管理电路中,普遍常用使用最多的的如PW4054这种的线性降压充电管理芯片,特点就是外围极简洁,但是只能支持USB口的输入5V了.当然也有稍微高点的PW4065,输入电压范围是4.7V-8V的 ...
- vue3 watch笔记
watchEffect 执行传入的一个函数,同时自动追踪函数中依赖到的数据,并在其依赖变更时重新运行该函数. 并且会在 组件挂载前 立即调用一次,(默认是挂载前,可通过修改 flush 属性改变,后边 ...