都2021年了,你不会还没掌握响应式网页设计吧?
如何掌握响应式网页设计
- 知道响应式设计与自适应设计
- 反应灵敏
- 适应性强
- 使用相对单位
- 将设计划分为断点
- 引导响应断点
- 了解最大值和最小值
- 使用嵌套对象
- 移动端或PC端优先
- 理解Web VS System字体
- Bitmap vs vector 图像
你是否仍然在努力使网站具有响应能力。我知道初学者可以在网上冲浪(我之前已经这样做过),以使网站具有响应性,但是他们这样得到的只是对小概念的解释。
在本文的这篇文章中,我将谈谈有关如何掌握响应式网页设计的所有知识。
知道响应式设计与自适应设计
反应灵敏
- 网站外观的动态变化。
- 取决于设备的屏幕尺寸和方向。
适应性强
- 自适应设计使用一些固定的布局,然后为当前屏幕尺寸选择最佳的布局。
使用相对单位
开始使用相对单位代替使用绝对单位。
绝对单位=>不要使用{cm,mm,in,pc,px,pt}
相对单位=>使用{em,rem,lh,vw,vh}
将设计划分为断点
断点是预定义的测量区域,可让您根据浏览器或设备的大小重新排列Web布局。
引导响应断点
- 小型设备=
@media (min-width:576px) {...}
- 中型设备=
@media (min-width:768px) {...}
- 大型设备=
@media (min-width:992px) {...}
- 特大设备=
@media (min-width:1200px) {...}
了解最大值和最小值
了解何时使用最大值和最小值。
- 当设备宽度大于或等于1024px时,它将起作用。
@media (min-width: 1024px){h1 {font-size: 1rem;}}
当设备小于或等于1024px时它将起作用
@media (max-width: 1024px){h1 {font-size: 0.5rem;}}
使用嵌套对象
嵌套对象或容器是另一个对象内部的对象。
它允许控制嵌套元素,而不必始终控制每个元素。
<div class="parent"><span class="nested-element-1">Read</span><p class="nested-element-1">RAHULISM></p><p class="nested-element-1">Articles</p>
</div><!-- STYLE -->
<style> .parent span {color: black;}.parent p {color: blue;}
</style>
移动端或PC端优先
什么时候“PC端优先”合适
- 当PC端的销量很高时
- 用户界面丰富
- 专注于复杂和增强的视觉效果
- 具有生产力工具或与业务相关的服务的网站
- 高度精致的用户体验
什么时候“移动端优先”合适
- 简单而简约的网站
- 用户体验针对移动设备进行了优化
- 娱乐,新闻或其他移动类别之类的网站。
理解Web VS System字体
您网站上加载的每一种字体或字体都将发送到服务器并发出请求,然后再返回。
- 系统字体是默认字体,可以快速加载
- Web字体会降低正在浏览您网站的用户的加载时间
正确提供了一些安全的Web字体
Georgia, Times New Roman/Times, Arial / Helvetica, Comic Sans, Lucida Sans Unicode, Tahoma / Geneva, Courier New.
Bitmap vs vector 图像
Bitmap图像存储为一系列称为像素的小点,
vector(矢量)图像是由点,线和曲线组成的艺术品,这些点,线和曲线基于数学方程式,而不是单色的正方形像素。
使用哪个?
矢量图像:比Bitmap图像更具可扩展性,能够增加图形的大小而不会产生像素化和更好的质量。
作者公众号:【海拥】
关注支持一下吧,后面我还会持续更新免费好玩的H5小游戏代码、Java小游戏代码、好玩、实用的项目和软件等
温馨提示:最后不要忘了❤或
都2021年了,你不会还没掌握响应式网页设计吧?相关推荐
- 都2021年了,不会还有人连深度学习还不了解吧(六)-- Padding篇
导读 本篇文章主要介绍CNN中常见的填充方式Padding,Padding在CNN中用的很多,是CNN必不可少的组成部分,使用Padding的目的主要是为了调整输出的大小,是必须搞清楚的知识点.如果你 ...
- 都2021年了,不会还有人连深度学习都不了解吧(五)-- 下采样篇
导读 该篇文章重点介绍CNN中下采样方式,下采样是CNN中必不可少的阶段之一,CNN中常用的下采样方式有平均池化和最大池化,同时平均池化和最大池化也是注意力机制的重要组件. 目前深度学习系列已经更新了 ...
- 都2021年了,不会还有人连深度学习都不了解吧(三)- 损失函数篇
一.前言 深度学习系列文章陆陆续续已经发了两篇,分别是激活函数篇和卷积篇,纯干货分享,想要入门深度学习的童鞋不容错过噢!书接上文,该篇文章来给大家介绍" 选择对象的标准 "-- 损 ...
- 都2021年了,不会还有人连深度学习都不了解吧(一)- 激活函数篇
一.前言 本人目前研一,研究方向为基于深度学习的医学图像分割,转眼间已接触深度学习快1年,研一生活也即将结束,期间看了大量的英文文献,做了大量的实验,也算是对深度学习有了一个初步的了解吧.接下来的一段 ...
- 都2021年了,不会还有人连深度学习都不了解吧(二)- 卷积篇
一.前言 上篇文章详细阐述了激活函数是什么.常用的激活函数有哪些以及为什么要使用激活函数,相信大家对此有了一定的了解.在此基础上,我们趁热打铁,继续学习深度学习其它必须的知识.该篇文章讲述卷积操作及其 ...
- HTML5期末大作业:服装商城网站设计——2021凡客服装商城(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web前端设计与开发期末作品/期末大作业
HTML5期末大作业:服装商城网站设计--2021凡客服装商城(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web前端设计与开发期末作品/期末大作业 常见网页设计作业题材 ...
- HTML5期末大作业:服装商城网站设计——2021凡客服装商城(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web前端设计与开发期末作品_期末大作业
HTML5期末大作业:服装商城网站设计--2021凡客服装商城(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web前端设计与开发期末作品/期末大作业 常见网页设计作业题材 ...
- 还没过时的用户体验设计趋势
2017年就剩5个月了,这些用户体验设计趋势还没过时呦:从节省时间的设计到更智能的个性化,影响生活的指标,专业领域的商机,以及作为管理实践的用户体验. 2016年用户体验大赢家 在我们期待着全球201 ...
- 转行、入行必看!都2021年了,数据分析行业还值得进吗?
转行进数据分析已经十年了,表达一下我的个人看法. 私以为,数据分析行业是可以长期发展下去的,但是对于数据分析师的专业技能的要求会越来越严格. 一.原因分析 在互联网时代下诞生的不仅仅是一系列的智能产品 ...
最新文章
- 误删/etc/passwd的修复
- C#的二进制序列化组件MessagePack介绍
- java logging 格式化_java.util.logging.Logger使用详解 (转)
- LeetCode(1029)——两地调度(JavaScript)
- Tensorflow——add_layer(添加神经层)
- 银行软件业务开发分类杂谈-多年前的旧文
- Android系统自带样式(@android:style/) (转)
- python中的进程(二)
- linux 代码编辑器软件下载,Visual Studio Code下载
- 利用Python scapy爬取起点小说网小说
- 收款码三合一制作微信小程序源码下载多模板选择
- 计算机系统汉字编码分为,计算机中的汉字编码
- 博弈论——4.1三人博弈的纳什均衡练习题
- 一个超级实用的单片机调试技巧!DWT组件
- 2022-2028全球阻隔吹膜生产线行业调研及趋势分析报告
- 中医药大学远程教育计算机,《中医药大学远程教育计算机作业 1-7》.doc
- ​Spring Cloud:统一异常处理
- http 301 302 303 307 308 傻傻分不清
- electron 打包后启动应用报错:Error: ENOENT: no such file or directory, open ‘xxx/manifest.json‘‘
- softlayer iso_在SoftLayer上使用Open edX构建在线学习平台
热门文章
- python模块化导入
- 如何破解自如的反爬机制
- bootstrap手风琴_快速提示:如何自定义Bootstrap 4的手风琴组件
- HTML+CSS+VUE 简易的便签
- 程序员泪流满面的图片
- android做开场动画,Android_Android开场动画类完整实现代码,本文所述实例为在android中开起 - phpStudy...
- 梨花院落溶溶月,柳絮池塘淡淡风-- 我心中的七剑与梁羽生
- VS2022 支持XP
- 黑色曼陀罗的宿命,无尽的结束,留下伤痛与悲残
- 记录一次uni-app按导航栏左边返回,app闪退问题