注册 登录

简单三步,让你的网站变成响应式网站!

网站建设 服务器租用 2786次浏览 0个评论 扫描二维码

简单三步,让你的网站变成响应式网站!

响应式web设计

Android和ios的浏览器都基于Webkit核心。这两种浏览器以及很多其他浏览器如chrome、opera,都支持用viewport meta元素覆盖默认的画布缩放设置,只需要在html的head标签中插入一个meta标签。meta标签中可以设置具体的宽度或者缩放比例。示例:

<meta name=”viewport” content=”width=device-width,initial-scale=2,maximum-scale=3,user-scalable=no”>

分析:width=device-width告诉浏览器页面的宽度应该等于设备宽度;initial-scale=2页面的缩放比例,设置比例为设备尺寸的2倍;maximum-scale=3,允许用户将页面最多放大至设备宽度的3倍;user-scalable=no禁止用户缩放。缩放是一个重要的辅助功能,所以实践中很少禁用。

简单三步,让你的网站变成响应式网站!

响应式网站

1、粘贴下面的代码到head和/head标签之间

<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>

(设置比例为1.0这表示浏览器将按照其视口的实际大小来渲染页面)

2、针对不同视口宽度修正设计

设置viewport meta 标签后,现在我们针对不同视口修正设计效果,创建CSS样式表,并在页面中调用

常见媒体查询

/* 平板电脑布局: 481px 至 768px。样式继承自: 移动设备布局。 */

@media only screen and (min-width: 481px) {

.class{

background: #333;

}

}

/* 桌面电脑布局: 769px 至最高 1232px。样式继承自: 移动设备布局和平板电脑布局。 */

@media only screen and (min-width: 769px) {

.class {

background: #666;

}

}

3、字体、视频、弹性图片

对于响应式网站来说应该有响应式的字体,一个响应式的字体大小应关联它的父容器的宽度,这样它才可以适应客户端的屏幕。

CSS3 规范引入了一个新的单位叫 rem,和 em 类相似,但相对于 HTML 元素来说,rem 更易于使用。

rem 是相对于 HTML 元素的,不要忘了重置 HTML 的字体大小:

html { font-size:100%; }

完成后,您可以定义响应式的字体大小,如下所示:

@media (min-width: 640px) { body {font-size:1rem;} }

@media (min-width:960px) { body {font-size:1.2rem;} }

@media (min-width:1100px) { body {font-size:1.5rem;} }

视频

我们需要对视频做max-width: 100%的设置;但是Safari对embed的该属性支持不是很给力,所以我们以width: 100%来代替:

.video embed,

.video object,

.video iframe {

width: 100%;

height: auto;

}

弹性图片

同样的,对于图片,我们也需要设置max-width:100%和height:auto,来实现其弹性化。对于IE,仍然需要一点额外的工作:

img {

max-width: 100%;

height: auto;

width: auto\9; /* ie8 */

}


服务器租用(www.fuwuqizuyong.cc) , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明:简单三步,让你的网站变成响应式网站!
服务器租用
喜欢 (1)
[]
分享 (0)
服务器租用
关于作者:
服务器租用专注为广大站长与网友朋友分享建站教程、SEO优化文章、网站模板资源、服务器软件(Web环境、建站程序)等,另外为大家推荐各种国内外服务器、香港服务器、虚拟主机、域名购买优惠信息与服务器相关知识。
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到