重庆和诚筑

响应式Web设计技巧以及入门

发布时间: 2017-12-27      来源: 重庆和诚筑www.023hcz.com


html5和css3是现在网站建设的主流编写代码,响应式网站也是目前网站的常用模式,浅显的理解响应式网站就是根据屏幕分辨率的大小使网站布局、图片、文字大小等相应改变。现在使用平板、手机浏览网站的用户越来越多,对于前端开发开发,学好用html5、css3做响应式网站是势在必行。
 
响应式网站也叫自适应网站,普通的网站是针对大屏幕进行设计,然后将其缩小再设计小屏幕网站,而响应式网站的设计是先针对小屏幕进行设计,在逐步增强对大屏幕的设计。
 
下面进过三个简单步骤,就可以让你的网站变为响应式网站
 
ios和Android浏览器都基于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禁止用户缩放。缩放是一个重要的辅助功能,所以实践中很少禁用。
 
一:粘贴下面的代码到<head>和</head>标签之间:
 
<meta name="viewport" content="width=device-width,initial-scale=1.0">
 
设置比例为1.0这表示浏览器将按照其视口的实际大小来渲染页面
 
二:针对不同视口宽度修正设计
 
设置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;
 
  }
 
}
 
三:字体、弹性图片、视频
 
对于响应式网站来说应该有响应式的字体,一个响应式的字体大小应关联它的父容器的宽度,这样它才可以适应客户端的屏幕。
 
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;} }
 
请注意,旧浏览器不支持 rem 单元,所以不要忘了实现一个替代。
 
弹性图片
 
我们需要为图片设置max-width:100%和height:auto,来实现其弹性化。对于IE,仍然需要一点额外的工作:
 
img {
 
    max-width: 100%;
 
    height: auto;
 
    width: auto\9; /* ie8 */
 
}
 
弹性内嵌视频
 
同样的,对于视频,我们也需要做max-width: 100%的设置;但是Safari对embed的该属性支持不是很给力,所以我们以width: 100%来代替:
 
.video embed,
 
.video object,
 
.video iframe {
 
    width: 100%;
 
    height: auto;
 
}
 
 
相应式网站建设—专业网站开发设计—重庆和诚筑
上一篇:教你如何把SEO伪原创文章变成原创?
下一篇:重庆和诚筑网站运营搜索引擎优化策略

服务支持

我们珍惜您每一次在线询盘,有问必答,用专业的态度,贴心的服务。

让您真正感受到我们的与众不同!