响应式设计
o沈炼o
你的敌人只有你自己
展开
-
什么是 Viewport?
Viewport:就是你设备屏幕的可视宽度和高度;手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中(因为当时你设计网页的时候是按浏览器的宽度和高度来设计,现在突然放到你手机屏幕浏览而你手机屏幕尺寸太小了产生了冲突不协调),通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看...原创 2018-04-09 14:45:54 · 359 阅读 · 0 评论 -
CSS媒体查询
媒体:设备(手机、平板、电脑);媒体解析:获取不通屏幕尺寸(宽度和高度);根据媒体设计样式:当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面;CSS 语法:@media mediatype and|not|only (media feature) { CSS-Code;}你也可以针对不同的媒体使用不同 stylesheets :<link rel="stylesh...原创 2018-04-09 14:20:06 · 472 阅读 · 0 评论 -
CSS网格布局;
网格分析:N行N列组成网格(拐来拐去又变为表格);在CSS布局中我们只需要实现一行N列效果,然后组成多行多列:必须调整全局盒模型:* { box-sizing: border-box;}响应式网格视图通常是 每行12 列,行宽度为100%,行、列在浏览器窗口大小调整时会自动伸缩;由此我们可以计算出每列的百分比: 100% / 12 列 = 8.33%;在每列中指定 class, clas...原创 2018-04-09 13:33:27 · 523 阅读 · 0 评论