rem适配布局
关注
分享
扫一扫
文章平均质量分 57
红人日天
转行不干前端的第三年了。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
移动Web开发——rem适配布局（完结）、苏宁首页实战
rem适配布局（完结）1.rem适配方案（第二种）（1）使用技术flexible.js+rem（2）flexible.js的原理github地址链接: https://github.com/amfe/lib-flexible.不需要写不同的媒体查询，js做处理原理：把设备划分成10等份，不同设备下，比例是一致的我们要做的是确定好当前设备的 html大小 比如当前设计稿是750px，只需要把html文字大小设置为75px（750px/10）页面元素 rem 值 = 页面元素的px值 / 7原创 2021-03-02 11:16:39 · 880 阅读 · 0 评论 -
移动Web开发——rem适配布局（七）
rem适配布局（七）1. 用技术1实现苏宁首页苏宁首页访问链接：https://m.suning.com/.（1）技术选型方案：采取单独制作移动页面方案技术：布局采取rem适配布局（less + rem + 媒体查询）设计图：采取750px设计尺寸（2）搭建相关文件结构（3）设置视口标签以及初始化样式html代码// 初始化<!DOCTYPE html><html> <head> <meta charset="utf-8">原创 2021-03-01 23:22:10 · 269 阅读 · 0 评论 -
移动Web开发——rem适配布局（六）
rem适配布局（六）学习目标（1）能够使用rem单位（2）能够使用媒体查询的基本语法（3）能够使用Less的基本语法（4）能够使用Less中的嵌套（5）能够使用Less中的运算（6）能够使用2种rem适配方案（7）能够独立完成苏宁移动端首页1.rem适配方案（1）提出问题我们使用rem适配的目标是什么？怎么去实现它？① 让一些不能等比的自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备② 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸原创 2021-03-01 10:43:28 · 514 阅读 · 0 评论 -
移动Web开发——rem适配布局（五）
rem适配布局（五）学习目标（1）能够使用rem单位（2）能够使用媒体查询的基本语法（3）能够使用Less的基本语法（4）能够使用Less中的嵌套（5）能够使用Less中的运算（6）能够使用2种rem适配方案（7）能够独立完成苏宁移动端首页1.Less变量@变量名: 值;1.变量名规范● 必须有@为前缀● 不能包含特殊字符● 不能以数字开头● 大小写敏感2.Less 编译本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通原创 2021-02-28 17:09:15 · 207 阅读 · 2 评论 -
移动Web开发——rem适配布局（四）
rem适配布局（四）学习目标（1）能够使用rem单位（2）能够使用媒体查询的基本语法（3）能够使用Less的基本语法（4）能够使用Less中的嵌套（5）能够使用Less中的运算（6）能够使用2种rem适配方案（7）能够独立完成苏宁移动端首页...原创 2021-02-28 11:24:21 · 175 阅读 · 0 评论 -
移动Web开发——rem适配布局（三）
媒体查询1.引入资源当样式比较繁多的时候，我们可以针对不同的媒体使用不同stylesheets原理：直接在link中判断设备的尺寸，然后引用不同的css文件例1：html代码// 例子<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, i原创 2021-02-27 21:06:08 · 132 阅读 · 0 评论 -
移动Web开发——rem适配布局（二）
rem适配布局（二）学习目标（1）能够使用rem单位（2）能够使用媒体查询的基本语法（3）能够使用Less的基本语法（4）能够使用Less中的嵌套（5）能够使用Less中的运算（6）能够使用2种rem适配方案（7）能够独立完成苏宁移动端首页1.媒体查询（1）什么是媒体查询媒体查询（Media Query）是CSS 3的新语法① 使用 @media 查询，可以针对不同的媒体类型定义不同的样式 ② @media 可以针对不同的屏幕尺寸设置不同的样式 ③ 当重置浏览器的大小的过程中，页原创 2021-02-27 20:15:35 · 191 阅读 · 0 评论 -
移动Web开发——rem适配布局（一）
rem适配布局（一）学习目标（1）能够使用rem单位（2）能够使用媒体查询的基本语法（3）能够使用Less的基本语法（4）能够使用Less中的嵌套（5）能够使用Less中的运算（6）能够使用2种rem适配方案（7）能够独立完成苏宁移动端首页1.rem基础（1）rem单位rem(root em)是一个相对单位，类似于em，em是父元素字体大小不同的是，rem的基准是相对于html元素的字体大小例如：根元素(html)设置 font-size = 12px &n原创 2021-02-27 14:33:23 · 186 阅读 · 0 评论