您现在的位置是:首页 > 站长新闻站长新闻
响应式网站前端设计你了解嘛?
2021-04-10【站长新闻】人已围观
简介1.使用em和rem来控制大小习惯于pc页面的前端开发人员可能更喜欢使用pc来控制页面大小,但是em和rem在响应页面中出现的频率更高。使用它们来控制字体大小,甚至是框架大小,总体上有非常明显的效果。可以大大减少工作量,同时保证字体比例的统一
1.使用em和rem来控制大小
习惯于pc页面的前端开发人员可能更喜欢使用pc来控制页面大小,但是em和rem在响应页面中出现的频率更高。使用它们来控制字体大小,甚至是框架大小,总体上有非常明显的效果。可以大大减少工作量,同时保证字体比例的统一。
em和rem的解释可以被每个人找到。有无数的在线教程。事实上,它们和px一样简单。在我开始使用它们之后,我只花了几分钟就熟悉了它们。如前所述,您也可以使用它们来控制框架的大小,然后在响应页面下均匀缩放。当然,这需要足够的计算。值得一提的是,字体图标也可以由它们控制。
2.关于比例问题
有几种方法可以解决缩放问题。最适合初学者的布局无疑是百分比布局。在关键点宽度设置下,百分比可能会产生意想不到的效果:
box1{ width:100%;}
ul{ margin:0 2%;}
有时这可能会大大减少工作量。将box1的宽度设置为100%后,它将自动用宽度填充整个浏览器。无论您在pc上的分辨率是多少,它总是表现良好。当您在第1栏中为ul设定约2%的利率时,情况也是如此。ul的实际边距大小也会随着浏览器窗口大小的变化而变化。
当然,有时它并没有想象中的效果,特别是在小分辨率下,原来看起来不错的百分比设置看起来很奇怪,因为大多数时候响应类型只指定宽度,长度由文档和浏览器决定。此时,如果你想在所有的终端上有一个好的体验,你需要Media Query来解决这个问题。
3.Media Query
通俗的解释是CSS的媒体查询功能,它不仅可以准确识别设备,还可以设置分辨率或宽度。w3cshoolMedia Query有媒体查询参考文档。如果你认为文件太多,我可以大致解释一下它是如何工作的。
必要时,你可以为一个box设定一个高度。当box的高度为500像素时,在个人电脑上看起来可能不错,但是当用手机打开时,就有点吓人了。整个box充斥着页面,内容排列混乱,严重影响用户体验。此时,您可以使用“媒体查询”为不同的尺寸设置不同的高度。例如,当640/320打开时,box的高度分别为300/200像素,这看起来就不错了。
你可以考虑import。事实上,媒体查询可以这样理解。它为不同的宽度或设备设置类似于导入的css规则,以确保实际呈现完成页面的效果。
4.响应布局中的框架
如果你想设计一个类似谷歌的搜索框,这是非常困难的。google 类型的搜索框实际上在框中包含一个输入,然后在框中添加左右图标。如果你用bootstrap来做这件事,可能会有许多令人困惑的冲突,但是你实际上得到了什么呢?一个圆角和一行高?还是他的百分比宽度?这些只是用css编写的几行代码。
很赞哦! ()
上一篇:网站制作具体有哪些步骤?
相关文章
随机图文
-
高转化率的详情页,应该怎么写?
前两天跟朋友吃饭,讨论一个问题 :“为什么初级文案的工资很低?是文案不重要吗?是文案很简单吗?都不是。我个人觉得是因为文案这个岗位,做到60分还是蛮容易的。都接受过九年义务教育,谁还不能写个几百字?这几年知识付费行业兴起,为了卖课 -
手机页面如何设计才能留住用户?
手机已经成为每个人生活必不可少的一部分,而移动端网站也成为每个企业网络营销中必要的选择。但是,由于手机的屏幕比电脑的屏幕小太多,所以在页面设计时会有许多的限制,虽然不会影响用户的浏览,但是用户会少很多的视觉体验,吸引不到用户。那么,手机页面怎 -
网站SEO优化的思路:做好以下5点,优化成功80%
很多时候,我们拿到一个网站,不知道从哪里入手开始优化,也不知道怎么优化网站才会有效果,其实不管对新手SEO或是老司机来说,一个正确的SEO优化思路是非常重要的,需要对SEO有个整体的把握,会当凌绝顶,一览众山小,站的高度高了,网站的问题可能一 -
如何说服同事,让对方支持SEO?
SEO存在几乎已经有20年的历史,但在国内它并不是一个非常被重视的职位,甚至有的公司同事,根本都不知道SEO是什么职业。 特别是你在一些大型网站工作,SEO的大量工作实际上都是外包给其他公司来做,这就使得SEO人员,在内部团队协同的时候,很