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 · 766 阅读 · 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 · 222 阅读 · 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 · 436 阅读 · 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 · 159 阅读 · 2 评论 -
移动Web开发——rem适配布局(四)
rem适配布局(四) 学习目标 (1)能够使用rem单位 (2)能够使用媒体查询的基本语法 (3)能够使用Less的基本语法 (4)能够使用Less中的嵌套 (5)能够使用Less中的运算 (6)能够使用2种rem适配方案 (7)能够独立完成苏宁移动端首页 ...原创 2021-02-28 11:24:21 · 130 阅读 · 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 · 94 阅读 · 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 · 138 阅读 · 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 · 137 阅读 · 0 评论