首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

新一代响应式设计:适应多设备的最佳解决方案

文件的分离为我们提供了一种简单的结构顺序,因此将媒体查询放置在每个组件中,靠近它们自己的样式,是最好的位置。 现在,由于每个组件都有相同的断点,将它们放入变量中以便更轻松地维护代码会更好。...网络上的常见做法是使用仅以最小宽度为起点而没有最大宽度的断点(称之为“开放式断点”),这是一个非常大的问题!你问为什么?因为你几乎无法控制上层断点会受到什么影响!...Open breakpoints 打开断点 当我们使用媒体查询时,有一个起始值但没有结束值。例如: Closed breakpoints 闭合断点 当我们使用具有开始和结束值的媒体查询时。...移动设备+平板电脑——适用于0像素至1000像素宽度 桌面版 - 适用于1001像素及以上的屏幕 现在,“移动导航栏”的样式不会影响“桌面导航栏”的样式,反之亦然。它们都被封装了!...总结 从这篇文章中需要了解的重点是什么: 以小组件为单位工作 在单独的文件中定义SASS变量中的常见闭合断点 在每个需要的组件中使用SASS变量的断点 工作和思考时要“基本优先”!

31230

前端必备,响应式Web设计的9项基本原则

最大和最小值 有时候内容占满整个屏幕宽度(例如在移动设备上)是好事,但如果相同的内容在电视屏幕上也撑得满满的,貌似就不太合理了。这就是为什么要有最大/最小值。...例如,如果宽度为100%,最大宽度1000px,那么内容就会以不超过1000px的宽度填充屏幕。 嵌套对象 还记得相对位置吗?如果一大堆要素彼此都紧密联系,那么必将难以控制。...因此,将要素放置到容器中就会让它们变得更加好理解,并且简洁明快。这种情况就需要用到像素之类的静态单位了。静态单位对于logo和按钮等不需要扩展的内容来说非常有用。...web字体vs系统字体 想让自己的网站拥有炫酷的Futura或Didot效果吗?那就是用web字体吧。...位图vs矢量图 你的图标是否有很多细节,并且应用了很多华丽的效果?如果是,那就用位图。如果不是,考虑使用矢量图。如果是位图,使用jpg、png或gif。矢量图则最好使用SVG或图标字体。其各有利弊。

63710
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    你应该知道的折叠屏手机适配

    为了适应不同屏幕尺寸和不同使用场景,使用绝对单位容易出现问题 。常见的相对单位有em、rem、ch、ex、vw、vh、vmax、vmin。 4.断点 ?...断点可以看做是临界点,比如屏幕宽度小于这个宽度时显示一个样式,大于这个宽度时显示另一样式。...常见的断点落地方案就是媒体查询,如: @media (min-width:800px) and (max-width:1800px) 5.最大和最小值 ?...这就是为什么要有最大/最小值。例如,如果宽度为 100%,最大宽度 1000px,那么内容就会以不超过 1000px 的宽度填充屏幕。...你的图标是否有很多细节,并且应用了很多华丽的效果?如果是,那就用位图。如果不是,考虑使用矢量图。如果是位图,使用 jpg、png 或 gif。矢量图则最好使用SVG或图标字体。其各有利弊。

    2.1K10

    理想的viewport(视口)并不存在

    这些数据主要来自美国和欧洲的用户,因此它们并不一定能代表全球观众,但对于本文而言仍然具有参考价值。 这个实验仅持续了48小时,但我们获得的数据相当有趣。现在,让我们深入了解一下。...然而,如果你倾向于使用非常特定的断点和硬编码的字体、尺寸和间距,即使出发点很好,你也可能发现自己并没有提供最佳的用户体验。...以一个具有固定页眉和/或页脚的“像素完美”(pixel perfect)用户界面为例。当你缩小开发用浏览器的尺寸时,它可能看起来很棒,但在前面概述的条件下,它看起来如何呢?..."移动端" 与 "桌面端" 在这次实验中,我们仅捕获了每个数据点的宽度和高度,这些尺寸是通过 window.innerWidth 和 window.innerHeight 获取的。...有趣的比较 来自流行框架的断点(Breakpoints) Figma中的断点 这一切的要点是什么? 我们想强调的主要观点是,你根本无法知道用户会以何种方式访问你的网站或网络应用。

    21730

    Mysql - 数据库面试题打卡第四天

    CHAR 和 VARCHAR 类型在存储和检索方面有所不同 CHAR 列长度固定为创建表时声明的长度,长度值范围是 1 到 255 当 CHAR值被存储时,它们被用空格填充到特定长度,检索 CHAR 值时需删除尾随空格...33、主键和候选键有什么区别? 表格的每一行都由主键唯一标识,一个表只有一个主键。 主键也是候选键。按照惯例,候选键可以被指定为主键,并且可以用于任何外键 引用。...34、myisamchk 是用来做什么的? 它用来压缩 MyISAM 表,这减少了磁盘或内存使用。 35、MyISAM Static 和 MyISAM Dynamic 有什么区别?...在 MyISAM Static 上的所有字段有固定宽度。动态 MyISAM Dynamic 表将具有像 TEXT,BLOB 等字段,以适应 不同长度的数据类型。...在 SELECT 语句的列比较中使用=,, =,>,>,,AND,OR 或 LIKE 运算符。 40、BLOB 和 TEXT 有什么区别?

    1.2K30

    MySQL面试题集锦,据说国内外知名互联网公司都在用!

    以下是CHAR和VARCHAR的区别: CHAR和VARCHAR类型在存储和检索方面有所不同 CHAR列长度固定为创建表时声明的长度,长度值范围是1到255 当CHAR值被存储时,它们被用空格填充到特定长度...创建表时TIMESTAMP列用Zero更新。只要表中的其他字段发生更改,UPDATE CURRENT_TIMESTAMP修饰符就将时间戳字段更新为当前时间。 17、主键和候选键有什么区别?...22、MyISAM Static和MyISAM Dynamic有什么区别? 在MyISAM Static上的所有字段有固定宽度。...、LIKE和REGEXP操作有什么区别? 34.、BLOB和TEXT有什么区别? 35、mysql_fetch_array和mysql_fetch_object的区别是什么?...45、NOW()和CURRENT_DATE()有什么区别? 46、什么样的对象可以使用CREATE语句创建? 47.、MySql表中允许有多少个TRIGGERS? 48、什么是非标准字符串类型?

    1.8K00

    MySQL面试题集锦,据说国内外知名互联网公司都在用!

    以下是CHAR和VARCHAR的区别: CHAR和VARCHAR类型在存储和检索方面有所不同 CHAR列长度固定为创建表时声明的长度,长度值范围是1到255 当CHAR值被存储时,它们被用空格填充到特定长度...创建表时TIMESTAMP列用Zero更新。只要表中的其他字段发生更改,UPDATE CURRENT_TIMESTAMP修饰符就将时间戳字段更新为当前时间。 17、主键和候选键有什么区别?...22、MyISAM Static和MyISAM Dynamic有什么区别? 在MyISAM Static上的所有字段有固定宽度。...、LIKE和REGEXP操作有什么区别? 34.、BLOB和TEXT有什么区别? 35、mysql_fetch_array和mysql_fetch_object的区别是什么?...45、NOW()和CURRENT_DATE()有什么区别? 46、什么样的对象可以使用CREATE语句创建? 47.、MySql表中允许有多少个TRIGGERS? 48、什么是非标准字符串类型?

    2K00

    响应式布局,你需要知道这些

    设备像素与CSS像素的区别是什么? EM,REM 的计算规则是什么?实际应用中如何选择? 什么是视口 viewport,布局视口,视觉视口,理想视口的区别? 百分比单位和视口单位的计算规则是什么?...响应式设计里,vw 和 vh 常被用于布局,因为它们是相对于视口的, vw,viewport width,视口宽度,所以 1vw = 1% 视口宽度 vh,viewport height,视口高度,所以...1vh = 1% 视口高度 以 IPhone X 为例,vw 和 CSS 像素的换算如下, 和 vw,vh 的区别是什么?...这里只需要记住一点,百分比是相对于父元素的宽度和高度计算的。 到这里,相信你已经掌握了响应式布局里常用的所有单位。接下来,我们介绍弹性盒和栅格,它们都不是单位,而是一种新的布局方案。

    1.8K20

    面试问题集合

    1.自我介绍 2.说一说你所知道的Python 数据类型有哪些? 3.Python 中列表和元组的区别是什么?元组是不是真的不可变?...19.软件产品质量特性是什么? 20.一台客户端有三百个客户与三百个客户端有三百个客户对服务器施压,有什么区别? 21.讲述软件的概念和特点?软件复用的含义?构件包括哪些?...29.在C/C++中static有什么用途?(请至少说明两种) 30.引用与指针有什么区别? 31.Internet采用哪种网络协议?该协议的主要层次结构?...Internet物理地址和IP地址转换采用什么协议? 32.说说你对集成测试中自顶向下集成和自底向上集成两个策略的理解,要谈出它们各自的优缺点和主要适应于哪种类型测试? 33.软件验收测试包括什么?...通过画因果图来写测试用例的步骤为___、___、___、___及把因果图转换为状态图共五个步骤 38.请说出这些测试最好由那些人员完成,测试的是什么?

    42120

    什么是定点数?

    在现实生活中,我们经常使用整数和小数,不知道你有没有思考过,这些数字在计算机中是如何存储的? 我们学习计算机知识时,经常听到「定点数」和「浮点数」,它们之间有什么区别?...平时说到整数,我们就说它是一个定点数,说到小数,就说它是一个浮点数,这种说法是正确的吗? 这篇文章,我们先来看一下,「定点数」究竟与整数和小数有什么关系。 什么是定点数?...,因为小数点固定在最低位和最高位,所以它们用定点数表示时,原理是相同的,只需要把整数部分、小数部分,按照十进制转二进制的规则,分别转换即可。...这里再总结一下这个过程: 在有限的 bit 宽度下,先约定小数点的位置 整数部分和小数部分,分别转换为二进制表示 两部分二进制组合起来,即是结果 在计算机中,用定点数表示一个数字的方法,是不是很简单?...扩大 bit 的宽度:例如使用 2 个字节、4 个字节,这样整数部分和小数部分宽度增加,表示范围也就变大了 改变小数点的位置:小数点向后移动,整个数字范围就会扩大,但是小数部分的精度就会越来越低,没有办法表示类似

    2.4K10

    响应式设计

    给所有用户提供同一份 HTML 和 CSS。通过使用几个关键技术,根据用户浏览器视口的大小(或者屏幕分辨率)让内容有不一样的渲染结果。这种方式不需要分别维护两个网站。...大屏幕的断点:覆盖对应的小屏幕和中等屏幕断点的样式 */ @media (min-width: 50em) { .title {} } 最优先的是移动端样式,因为它们不在媒体查询里,所以这些样式对所有断点都有效...# 添加响应式的列 许多响应式设计遵循这种方法:当设计要求元素并排摆放时,只在大屏上将它们摆放在一行。在小屏下,允许每个元素单独一行,填满屏幕宽度。...# 断点的选择 不要总想着设备。市面上有成百上千中设备和屏幕分辨率,无法逐一测试。相反,应该选择适合设计的断点,这样不管在什么设备上,都能有很好的表现。...用 Flexbox 布局也可以,设置弹性元素的 flex-grow 和 flex-shrink(更重要),让元素能够始终填满屏幕。要习惯将容器宽度设置为百分比,而不是任何固定的值。

    2.1K10

    2020年度总结了这 50 道 MySQL 高频面试题!

    以下是CHAR和VARCHAR的区别: CHAR和VARCHAR类型在存储和检索方面有所不同 CHAR列长度固定为创建表时声明的长度,长度值范围是1到255 当CHAR值被存储时,它们被用空格填充到特定长度...创建表时TIMESTAMP列用Zero更新。只要表中的其他字段发生更改,UPDATE CURRENT_TIMESTAMP修饰符就将时间戳字段更新为当前时间。 17、主键和候选键有什么区别?...22、MyISAM Static和MyISAM Dynamic有什么区别? 在MyISAM Static上的所有字段有固定宽度。...有四种类型的BLOB - TINYBLOB BLOB MEDIUMBLOB和 LONGBLOB 它们只能在所能容纳价值的最大长度上有所不同。 TEXT是一个不区分大小写的BLOB。...四种TEXT类型 TINYTEXT TEXT MEDIUMTEXT和 LONGTEXT 它们对应于四种BLOB类型,并具有相同的最大长度和存储要求。

    4K20

    《微机原理与接口技术》简答题总结及答案_微机原理与接口技术试题及答案

    怎样用16位寄存器实现对20位地址的寻址?完成逻辑地址到物理地址转换的部件是什么?...将逻辑地址中的段地址左移二进制4位(对应16进制是一位,即乘以16),加上偏移地址就得到20位物理地址。 10、 8086/8088微处理器内部有哪些寄存器,它们的主要作用是什么?...),各个寄存器的内容和标志位的状态,推入堆栈保留下来,称保护断点和现场。...有什么区别? 6 种工作方式。各工作方式的特点是: 方式 0,计数结束产生中断 方式 1,可重复触发的单稳态触发器。 方式 2,分频器。 方式 3,方波发生器。...4、 一般的I/O接口电路有哪四种寄存器,它们各自的作用是什么? 答:数据输入寄存器,数据输入寄存器,状态寄存器和控制寄存器。

    1.7K32

    这些C++工程师面试题你都会了吗?

    5、请你回答一下fork和vfork的区别 6、请问如何修改文件最大句柄数?...12、请问线程需要保存哪些上下文,SP、PC、EAX这些寄存器是干嘛用的 13、请你说一说线程间的同步方式,最好说出具体的系统调用 14、游戏服务器应该为每个用户开辟一个线程还是一个进程,为什么?...42、C++的锁你知道几种? 43、说一说你用到的锁 44、请你说一说死锁产生的必要条件? 45、请你来说一说协程 46、系统调用是什么,你用过哪些系统调用,和库函数有什么区别?...7、请你说一说inner join和left join 8、请你聊一聊数据库事物的一致性 9、请你说说索引是什么,多加索引一定会好吗 10、k-v存储中,key有哪些要求?...9、装饰器模式和单例模式,使用单例模式应该注意什么 七、场景题 1、给你两个球,100层楼,每个球在一定高度扔下去会碎,怎么用最少的次数给判断是几层楼能把求摔碎?

    3.9K30

    收藏了800道Java后端经典面试题,分享给大家,希望你找到自己理想的Offer呀~

    如何实现数组和 List之间的转换? 迭代器 Iterator 是什么?怎么用,有什么特点? Iterator 和 ListIterator 有什么区别? 怎么确保一个集合不能被修改?...HashSet和TreeSet有什么区别? Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()?...MYSQL数据库服务器性能分析的方法命令有哪些? Blob和text有什么区别? mysql里记录货币用什么字段类型比较好? Mysql中有哪几种锁,列举一下? Hash索引和B+树区别是什么?...它们之间的区别是什么? Mybatis动态sql有什么用?执行原理?有哪些动态sql? mybatis有几种分页方式?...Spring AOP的理解,各个术语,他们是怎么相互工作的? Spring框架中的单例bean是线程安全的吗? Spring @ Resource和Autowired有什么区别?

    1.2K21

    前端面试题归类-HTML2

    XML 是可扩展标记语言是未来网页语言的发展方向,XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的,数量无限多, 而 HTML 的标签都是固定的而且数量有限。...二、DTD 介绍DTD( Document Type Definition 文档类型定义)是一组机器可读的规则,它们定义 XML 或 HTML 的特定版本中所有允许元 素及它们的属性和层次关系的定义。...我们有时用移动设备访问桌面版网页就会看到一个横向滚动条,这里可显示区域的宽度就是viewport的宽度。...H5是HTML5的简称,就是“HTML”的第5个版本,也就是第5个版本的超文本标记语言。六、 页面导入样式时,使用 link 和 @import 有什么区别?...可以通过JS操作DOM,插入link标签来改变样式;由于DOM方法是基于文档的,无法使用@import的方法插入样式。七、 Label 的作用是什么?是怎么用的?

    75620

    2023最新JAVA面试题及答案整理(最新版)

    7、dubbo1)里面用的什么通信框架2)和dubbox有什么区别3)里面用的什么序列化框架4)如何利用zookeeper实现注册发现的,还有别的方式实现注册发现吗5)还了解别的分布式框架吗6)如何解决分布式服务调用链过长的问题...6)如何解决幻读问题7)读写分离方案8)有哪几种引擎及应用场景13、mybatis占位符的#和$有什么区别14、如何实现分布锁,需要考虑的问题15、spring事务传播机制有哪些,如何用jdbc实现require_new16...、java集合常用类及数据结构17、MQ1)什么是推模式,什么是拉模式2)有没有消息丢失情况,如何防止3)MQ用来解决什么问题4)你们用的什么MQ,为什么要用这个,它的最大吞吐量是多少18、设计模式1)...说说六大设计原则2)你会哪些设计模式3)装饰模式和代理模式有什么区别4)单例模式有哪几种写法,有哪些注意的地方5)怎么实现策略模式6)spring中用到了哪些设计模式19、线程有哪几种状态流转20、spring...ioc aop是什么,实现动态代理有哪些方式,代理类和原来的类之间是什么关系21、什么是悲观锁和乐观锁,分别如何实现22、java有哪几种自带的线程池,说说它们的应用场景23、说说volatile关键字及使用场景

    2.6K50

    iOS 开发面试通关指南:67 个必知问题!

    你可以深入讲讲这一点,例如,它们是如何保存在内存中的(栈/堆)等等。 14.什么是closure?这个你应该知道的吧? 15.weak和unowned是什么意思?二者有什么不同?...19.escaping和unescaping分别是什么意思?这是个简单的问题。但你还记得哪个是默认选项吗? 20.(如果求职者会Objective-C):Swift和Objective-C有什么区别?...在Swift中可以用吗?魔法……随便说点你知道的信息——例如为什么这样是危险的,等等。 NSArray和NSSet有什么区别?不要只说集合包含独特的元素,还要进一步说明它在不同情况下是如何表现的。...29.如何管理代码中的依赖(dependency)?你是使用依赖注入框架/工具,还是手动进行?或者你只使用单例(singleton)? 30.什么是REST?POST和GET方法有什么区别?...这个不经常用到,但是如果用到了,最好记得back gesture以及如何实现。 46.frame和bounds有什么区别?这是“面试必问”的一道题。但是有些开发人员并不知道答案。

    1.2K20

    助力秋招-独孤九剑荡剑式 | Java语言&基础面试题

    runtime exception int 和 Integer 有什么区别,Integer的值缓存范围 包装类,装箱和拆箱 如何将字符串反转 java 中操作字符串都有哪些类,它们之间有什么区别...String 属于基础的数据类型吗 重载和重写的区别 抽象类和接口有什么区别 说说反射的用途及实现 说说自定义注解的场景及实现 == 和 equals 的区别是什么?...Java集合类的源码 Collection 和 Collections 有什么区别 List、Set、Map 之间的区别是什么 TreeMap是如何实现的 HashMap 的实现原理,HashSet呢...线程池的关闭方式,有什么区别 线程池如何调优,最大数目如何确认?...常见的单例模式以及各种实现方式的优缺点,哪一种最好 单例模式的9种写法(闭着眼睛写不出来的去面壁) 设计模式在实际场景中的应用 Spring中用到了哪些设计模式 MyBatis中用到了哪些设计模式 你项目中有使用哪些设计模式

    66530
    领券