移动 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 ...
随机推荐
- 关于li标签的相关css属性
1.让li前面的序号变成空心圆 list-style-type: circle; 2.让li前面的序号在div里面 list-style-position: inside; 3.改变li前面的 ...
- SpringCloud——Eureka Feign Ribbon Hystrix Zuul等关键组件的学习与记录
SpringCloud--Eureka Feign Ribbon Hystrix Zuul等关键组件的学习与记录 前言:本篇是对近日学习狂神SpringCloud教程之后的感想和总结,鉴于对Sprin ...
- ATM项目详解
内容概要: ATM项目 代码实操流程 ATM项目 # 需求: """ - 额度15000或自定义 - 支持多账户登录 - 可以查看账户余额 - 可以提现(可自定义手续费比 ...
- day24-服务器端渲染技术02
服务器端渲染技术02 11.EL表达式 11.1EL表达式介绍 EL表达式全称:Expression Language,是表达式语言 EL表达式主要是代替jsp页面的表达式脚本 EL表达式输出数据时, ...
- 【PostgreSQL】PG读取元数据获取表结构及字段类型信息（过程拆解及其他应用场景）
〇.参考链接 一.代码 指定模式的表名和字段 select c.relname 表名, cast ( obj_description (relfilenode, 'pg_class') as varc ...
- 【Java SE进阶】Day06 线程、同步
一.线程 1.多线程原理 流程图 内存图解说明 创建线程的方式 继承Thread类 实现 Runnable接口 2.继承Thead类 3.实现Runnable接口 实现接口,重写run方法 最终均需要 ...
- 常用函数/异常处理/for循环本质
常用内置函数 1,map() - 映射 格式: map(函数,可遍历对象) 指将遍历的元素挨个取出来做函数的行参传参,得到的返回值全部放回map工厂中,map工厂可以被转换成列表查看到 每一个被函数处 ...
- Servlet层
package com.neu.servlet; import java.io.IOException;import java.io.PrintWriter;import java.util.Arra ...
- 洛谷P1605例题分析
迷宫 题目描述 给定一个 \(N \times M\) 方格的迷宫,迷宫里有 \(T\) 处障碍,障碍处不可通过. 在迷宫中移动有上下左右四种方式,每次只能移动一个方格.数据保证起点上没有障碍. 给定 ...
- Mapper的动态代理
可以自动生产接口的实现类 ,所以就不需要再写daoImpl这个实现类了, 直接使用sqlSession.getMapper自动生成实现类 @Before 此注解的目的是为了将@Befoe 作为首先执行 ...