HTML5教程

前端学习日志0924

本文主要是介绍前端学习日志0924，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

响应式布局和自适应布局

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。响应式开发与移动端与PC端分别开发的区别：响应式开发只编写一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。移动端与PC端分别开发，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机， 从而请求服务器，返回不同的页面。

响应式开发的原理是使用CSS3中的Media Query（媒体查询）针对不同宽度的设备设置不同的布局和样式，从而适配不同的设备。

CSS3 @media 查询定义和使用:

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

设备的划分情况为：

  • 小于768的为超小屏幕（手机）

  • 768~992之间的为小屏设备（平板）

  • 992~1200的中等屏幕（桌面显示器）

  • 大于1200的宽屏设备（大桌面显示器）

这篇关于前端学习日志0924的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航