![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
学习CSS-响应式设计篇
ai932820942
目前北漂
展开
-
响应式设计——viewport
1什么事viewport?viewport 是用户网页的可视区域.即用户通过屏幕看到的部分.PC端通常就是用户的浏览器窗口大小,当用户通过拖拉的方式改变浏览器窗口的大小的时候viewport也是做相应改变的。移动端的viewport比较特殊,一般移动端会有一个默认viewport大小和缩放比例。当我们的网页需要在移动端做正常显示时,需要修改viewport的相应配置。2修改viewport...原创 2019-06-20 11:20:09 · 183 阅读 · 0 评论 -
响应式设计——媒体查询(media queries)
1什么是媒体查询@media一个可以让你针对不同的媒体类型定义不同样式的方法。就是你可以针对屏幕尺寸的不同设置不同的样式。2兼容@media的浏览器现代浏览器、ie93@media的语法1.<link rel="stylesheet" media="mediatypeand|not|only (media feature)" href="mystylesheet.css...原创 2019-06-20 11:43:37 · 226 阅读 · 0 评论 -
响应式设计——媒体类型(mediatype)
1.什么是媒体类型媒体类型是CSS中一个常用属性,合理使用媒体类型可以实现不同设备间不同样式的效果。2.媒体类型的种类值 描述 all 应用于所有设备,默认为all print 用于打印机和打印预览 screen 屏幕设备,电脑、平板、智能手机等 speech 应用于屏幕阅读器等发声设备 现已被弃用的属性值 描述 aura...原创 2019-06-28 10:16:35 · 4066 阅读 · 0 评论 -
响应式设计——媒体特性(media feature)
1.什么是媒体特性如果说前面的媒体类型是根据设备类型选择加载的样式的话,那媒体特性顾名思义是根据设备的某些特殊性质去选择样式。如设备的宽高、设备的分辨率等等。2.媒体特性的种类值 描述 aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率 color 定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0 color-index...原创 2019-06-28 10:35:36 · 1258 阅读 · 0 评论