web随堂笔记

70 阅读1分钟

今天学习了

1.媒体查询

2.理想视口字体大小

3.移动端设计

下面是详细笔记

1.媒体查询

screen 就表示所有的电子设备的屏幕

print 表示打印机的屏幕

如果想所有的设备比如电脑屏幕和打印机都使用媒体查询以及其他的屏幕 可以使用@media all

@media screen表示所有的电子设备的屏幕

max-width/min-width

image.png

image.png

image.png

当因为min-width和max-width都有等于的作用 ,同时写时谁在最下面谁生效 上面的会被覆盖

image.png

2.理想视口字体大小 在浏览器窗口中 字体大小基于html设置的大小来调节

em 相对于父元素的大小

rem 相对于根元素html的大小

image.png

由于使用物理单位在不同宽度和不同分辨率的手机上会有一定的差异 因此使用rem或者em 作为移动端的单位 来兼容不同的手机设备

rem是相对于根元素html的大小来显示的 html的大小相对固定

换算方式 image.png