响应式网页设计基础

时间：2017-03-09 22:57:03 阅读：248 评论：0 收藏：0 [点我收藏+]

添加一个视窗：

视窗的配置只会出现在head标签当中，并且只需要声明一次。

　　使用元视口值 width=device-width 控制页面适应不同分辨率的屏幕宽度。无论是手机的小屏幕或桌面显示器，页面将会根据不同的屏幕尺寸重新对内容进行排版。

　一些浏览器在用户旋转为横向浏览的时候仅仅是保持页面宽度不变并缩放网页内容而不是对屏幕内容进行重新排版。加入属性initial-scale=1使页面无论在什么情况下都将CSS像素与屏幕像素的比例保持在1:1，并允许页面优先采用全尺寸屏幕宽度。

　　initial-scale属性控制页面最初加载时的缩放等级。maximum-scale、minimum-scale及user-scalable属性控制允许用户以怎样的方式放大或缩小页面。

background-size: cover; // 使该元素会在保持原比例上自由拉伸。

设置断点

设备查询技术(Media Queries)

@media (min-width: 600px) {

}

在我们的产品页面当中，看起来我们需要做：

这个容器会包含一个简单的 div 在下面的表格当中:

.container {

margin: auto;

max-width: 800px;

}

原文：http://www.cnblogs.com/jeacy/p/6528209.html

踩

(0)

评论一句话评论（0）

分享档案

更多>