跟着pink老师前端入门教程-day23

苏宁网首页案例制作

设置视口标签以及引入初始化样式

<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">

设置视口标签以及引入初始化样式

<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">

设置公共common.less文件

1. 新建common.less 设置好最常见的屏幕尺寸,利用媒体查询设置不同的html字体大小,因为除了首页其他页面也需要

2. 关心的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px

3. 划分的份数我们定为 15等份

4. 因为我们pc端也可以打开我们苏宁移动端首页,我们默认html字体大小为 50px,注意这句话写到最上面

新建index.less文件

1. 新建index.less 这里面写首页的样式

2. 将刚才设置好的 common.less 引入到index.less里面 语法如下:

// index.less 中导入 common.less 文件
@import “common”

3. 生成index.css 引入到 index.html 里面 

body样式

body {
        min-width: 320px;
        width:15rem;
        margin: 0 auto;
        line-height: 1.5;
        font-family: Arial,Helvetica;
        background: #F2F2F2;
}

15-苏宁首页common.less制作_哔哩哔哩_bilibili

16-苏宁首页import导入样式_哔哩哔哩_bilibili

17-苏宁首页body样式设置_哔哩哔哩_bilibili

18-苏宁首页search-content模块布局_哔哩哔哩_bilibili

19-苏宁首页search-content内容布局_哔哩哔哩_bilibili

20-苏宁首页search模块制作_哔哩哔哩_bilibili

21-苏宁首页banner和广告模块制作_哔哩哔哩_bilibili

22-苏宁首页nav部分制作_哔哩哔哩_bilibili

4.3 rem 适配方案2

3.1 简洁高效的rem适配方案flexible.js

手机淘宝团队出的简洁高效 移动端适配库

再也不需要在写不同屏幕的媒体查询,因为里面js做了处理

它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。

要做的,就是确定好当前设备的html 文字大小就可以了

比如当前设计稿是 750px, 那么只需要把 html 文字大小设置为 75px(750px / 10) 就可以

里面页面元素rem值: 页面元素的px 值 / 75

剩余的,让flexible.js来去算

github地址:https://github.com/amfe/lib-flexible

3.2 使用适配方案2制作苏宁移动端首页
1、设置视口标签以及引入初始化样式还有js文件
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
我们页面需要引入 这个 js 文件
index.html 中 引入 flexible.js 这个文件
<script src=“js/flexible.js”> </script>
2、body样式
body {
        min-width: 320px;
        width:15rem;
        margin: 0 auto;
        line-height: 1.5;
        font-family: Arial,Helvetica;
        background: #F2F2F2;
}

24-rem适配方案2苏宁首页前期准备工作_哔哩哔哩_bilibili

25-rem适配方案2body样式修改_哔哩哔哩_bilibili

3.3 VSCode px 转换rem 插件 cssrem

26-一个神奇的vscode插件cssrem_哔哩哔哩_bilibili

27-修改flexible默认html字体大小_哔哩哔哩_bilibili

28-rem适配方案2search-content内容制作1_哔哩哔哩_bilibili

29-rem适配方案2search-content内容制作2_哔哩哔哩_bilibili

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/677138.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mybatis是否支持延迟加载?

前言 随着互联网应用的不断发展&#xff0c;数据库访问成为了应用开发中的一个重要环节。在这个背景下&#xff0c;MyBatis作为一种优秀的持久层框架&#xff0c;提供了灵活的SQL映射配置和强大的功能&#xff0c;为开发者提供了便捷的数据库访问解决方案。本文将深入探讨MyBat…

(2024,街景生成,道路拓扑生成器,对象布局生成器,成分集成和天气生成)Text2Street:街景的可控文本到图像生成

公和众和号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; Text2Street: Controllable Text-to-image Generation for Street Views 目录 0. 摘要 2. 相关工作 3. 方法 3.1. 概述 3.2. 车道感知的道…

如何将 Hexo 部署到 GitHub Pages

引言 在数字时代&#xff0c;拥有个人博客是展示自己想法、分享知识和技能的绝佳方式。Hexo 是一个基于 Node.js 的静态博客生成器&#xff0c;它结合了简洁性和功能性&#xff0c;让我们可以轻松地建立并维护一个博客。而 GitHub Pages 提供了一个免费的平台来托管这些静态网站…

【java】简单的Java语言控制台程序

一、用于文本文件处理的Java语言控制台程序示例 以下是一份简单的Java语言控制台程序示例&#xff0c;用于文本文件的处理。本例中我们将会创建一个程序&#xff0c;它会读取一个文本文件&#xff0c;显示其内容&#xff0c;并且对内容进行计数&#xff0c;然后将结果输出到控…

vue3跨组件(多组件)通信:事件总线【Event Bus】

★推荐方案&#xff1a;使用 events npm库&#xff1b; 可用范围&#xff1a;vue、react、angular等任何框架都可使用&#xff1b;且使用方式完全一致&#xff1b; 本文仅介绍、讲解对web页面端项目的常用API&#xff1b;通过events实现事件总线功能&#xff1b; event库概述&a…

交易之路:从无知到有知的五个阶段

交易是易学的&#xff0c;它的操作很直观&#xff0c;也是复杂的&#xff0c;它的价格很玄妙。在金融行业日益壮大的背景下&#xff0c;新人辈出&#xff0c;而弱者则逐渐退出。市场生态在不断变化&#xff0c;我们每个人在交易之路上所经历的种种&#xff0c;既清晰可见又模糊…

Flask实现异步调用sqlalchemy的模型类

事情是这样的&#xff0c;我这边需要在一次请求里面&#xff0c;搞一个异步不阻碍的任务&#xff0c;来执行耗时的操作。 一开始&#xff0c;我准备写的代码是这样的&#xff1a; from flask import Flask import time from concurrent.futures import ThreadPoolExecutorexec…

基于opencv-python模板匹配的银行卡号识别(附源码)

目录 介绍 数字模板处理 银行卡图片处理 导入数字模板 模板匹配及结果 介绍 我们有若干个银行卡图片和一个数字模板图片&#xff0c;如下图 我们的目的就是通过对银行卡图片进行一系列图像操作使得我们可以用这个数字模板检测出银行卡号。 数字模板处理 首先我们先对数…

WPF DispatcherTimer用法

System.Windows.Threading.DispatcherTimer 类主要用于WPF应用程序中进行周期性任务调度&#xff0c;并且保证这些任务在UI线程上执行。 这对于需要更新界面或与UI元素交互的定时操作非常有用&#xff0c;因为WPF的所有UI操作都必须在主线程&#xff08;即Dispatcher线程&…

【开源】SpringBoot框架开发桃花峪滑雪场租赁系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 游客服务2.2 雪场管理 三、数据库设计3.1 教练表3.2 教练聘请表3.3 押金规则表3.4 器材表3.5 滑雪场表3.7 售票表3.8 器材损坏表 四、系统展示五、核心代码5.1 查询教练5.2 教练聘请5.3 查询滑雪场5.4 滑雪场预定5.5 新…

实践:微服务版本升级步骤以及maven仓库相关概念

进行微服务开发的时候&#xff0c;上层服务依赖于下层的服务的api&#xff0c;比如适配属于上层服务&#xff0c;用户属于下层服务。 例子: 上层服务 <!--订单管理微服务api依赖--> <dependency><groupId>com.jn.server</groupId><artifactId>…

One time pad 图像加密MATLAB程序

使用一次加密的形式对图像进行加密。 采用异或的方式实现。 加密、解密结果如下: 程序代码如下: % 读取原始图像并显示 originalImage = imread(lena256.bmp); % 更换为你的图像文件名 subplot(1,3,1),imshow(originalImage); title(Original Image);% 生成与图像相同大…

低代码市场的未来展望:趋势、机遇与挑战

根据 Zoho 的一项新研究&#xff0c;低代码市场正处于成为主流的风口浪尖。该报告对全球 800 多名 IT 和业务领导者进行了调查&#xff0c;确定了推动其采用的几个因素。其中最重要的是提高应用程序的开发速度。 这一发现对企业领导者来说应该不足为奇。 客户、合作伙伴和员工…

SQL持续更新中

问: 什么是SQL&#xff1f; 答: Structured Query Language 结构化查询语言&#xff1b;其实就是定义了操作所有关系型数据库的规则。每一种数据库操作的方式存在不一样的地方&#xff0c;称为 方言。 通用语法 SQL 语句可以单行或多行书写&#xff0c;以分号结尾。可使用空格…

2.7 Binance_interface APP 现货交易-限价单开仓

Binance_interface APP 现货交易-限价单开仓 Github地址PyTed量化交易研究院 目录 Binance_interface APP 现货交易-限价单开仓1. APP 现货交易-限价单开仓函数总览2. 模型实例化3. 同步 非堵塞 限价开仓&#xff08;购买&#xff09;4. 同步 堵塞 限价开仓&#xff08;购买&a…

linux进程(进程状态)

目录 前言&#xff1a; 正文&#xff1a; 1.R运行状态&#xff08;running&#xff09; 2.睡眠状态&#xff08;sleeping&#xff09; 3.D磁盘休眠状态&#xff08;Disk sleep&#xff09; 4停止状态&#xff08;stop&#xff09; 5僵尸状态&#xff08;Z&#xff09; …

从零开始学HCIA之NAT基本工作原理

1、NAT设计之初的目的是解决IP地址不足的问题&#xff0c;慢慢地其作用发展到隐藏内部地址、实现服务器负载均衡、完成端口地址转换等功能。 2、NAT完成将IP报文报头中的IP地址转换为另一个IP地址的过程&#xff0c;主要用于实现内部网络访问外部网络的功能。 3、NAT功能一般…

C#系列-C#访问FTP服务器实现上传下载(8)

FTP Server是什么&#xff1f; FTP Server&#xff08;File Transfer Protocol Server&#xff09;&#xff0c;即文件传输协议服务器&#xff0c;是在互联网上提供文件存储和访问服务的计算机。它依照FTP协议提供服务&#xff0c;专门用来传输文件。 FTP Server允许不同的客…

攻防世界 CTF Web方向 引导模式-难度1 —— 11-20题 wp精讲

PHP2 题目描述: 暂无 根据dirsearch的结果&#xff0c;只有index.php存在&#xff0c;里面也什么都没有 index.phps存在源码泄露&#xff0c;访问index.phps 由获取的代码可知&#xff0c;需要url解码(urldecode )后验证id为admin则通过 网页工具不能直接对字母进行url编码 …

SolidWorks学习笔记——入门知识2

目录 建出第一个模型 1、建立草图 2、选取中心线 3、草图绘制 4、拉伸 特征的显示与隐藏 改变特征名称 5、外观 6、渲染 建出第一个模型 1、建立草图 图1 建立草图 按需要选择基准面。 2、选取中心线 图2 选取中心线 3、草图绘制 以对称图形举例&#xff0c;先画出…