你是否仍然在努力使网站具有响应能力。我知道初学者可以在网上冲浪(我之前已经这样做过),以使网站具有响应性,但是他们这样得到的只是对小概念的解释。
在本文的这篇文章中,我将谈谈有关如何掌握响应式网页设计的所有知识。
开始使用相对单位代替使用绝对单位。
绝对单位=>不要使用{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) {...}
了解何时使用最大值和最小值。
@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端优先”合适
什么时候“移动端优先”合适
您网站上加载的每一种字体或字体都将发送到服务器并发出请求,然后再返回。
正确提供了一些安全的Web字体
Georgia, Times New Roman/Times, Arial / Helvetica, Comic Sans, Lucida Sans Unicode, Tahoma / Geneva, Courier New.
Bitmap图像存储为一系列称为像素的小点,
vector(矢量)图像是由点,线和曲线组成的艺术品,这些点,线和曲线基于数学方程式,而不是单色的正方形像素。
使用哪个? 矢量图像:比Bitmap图像更具可扩展性,能够增加图形的大小而不会产生像素化和更好的质量。