服务热线:400-889-1636
在线咨询: 
网站建设,网站制作,企业网站建设,网上商城,网站推广,域名注册,求创科技
网站建设,网站制作,企业网站建设,网上商城,网站推广,域名注册,求创科技
首页 求创资讯 响应式网站响应式网站
求创动态行业资讯网站建设网页设计微网站手机网站H5动画系统开发APP开发交互设计微信小程序网站维护

    响应式网站

  • 来源:CSDN
    作者:Dear_Mr
    转载时间:2019/7/17 13:38:54
一、响应式网站概念

响应式网站是一个设计理念,它是多项技术的综合体

flexible grid layout 弹性网格布局

flexible image 弹性图片

media queries 媒体查询



二、响应式网站的优点与缺点


优点


(1)减少工作量


网站、设计、代码、内容都只需要一份
多出来的工作量只是JS、CSS样式的修改


(2)节省时间

(3)每个设备都能得到正确的设计

(4)搜索优化


缺点


(1)会加载更多的样式和脚本资源

(2)设计比较难精确定位和控制

(3)老版本浏览器兼容不好



三、 媒体查询

CSS2中:



<link rel="stylesheet" type="text/css" href="site.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">12

CSS3中:媒体类型和函数



all代表所有媒体类型
@media all and(min-width:800px)and(orientation:landscape) {
  ...
}
12345

可用媒体查询符not、and、only进行连接

“,”分隔代表的其实就是”or”

only: 防止老旧的浏览器,不支持带媒体属性的查询,而应用到给定的样式

CSS媒体属性简介:

width : 视口宽度

height:适口高度

device-width: 渲染表面的宽度,就是设备屏幕的宽度

device-height:渲染表面的高度,就是设备屏幕的高度

orientation: 检查设备处于横向还是纵向

aspect-ratio:基于视口宽度和高度的宽高比

device-aspect-ratio:渲染表面的宽度,就是设备屏幕的宽度

color:每种颜色的位数bits 如: min-color:16位,8位

resolution:检查屏幕或打印机的分辨率,如min-resolution:300dpi

以上属性都可以添加min-和max-

viewport

布局视口(layout viewport)、可视视口(visual viewport)、理想视口(ideal viewport)

布局适口: 
document.documentElement.clientWidth/clientHeight 可以获得布局视口的宽度和高度,视口布局的长宽就等于在屏幕上展示的尺寸。当用户放大时,这些尺寸保持不变。布局视口宽度总是不变的。如果你旋转你的手机,可视视口改变,但浏览器为了适应这个旋转,会放大一些可视宽度,但布局视口大小依然不变。

一般移动设备的浏览器都默认设置了一个viewport 元标签,定义一个虚拟的layout  viewport(布局视口),用于解决早期的页面在手机上显示的问题



可视视口:可视视口就是展示在屏幕上的部分,用户可能滑动来改变可视区域,或者缩放来改变可视区域的大小。window.innerWidth/Height可以得到可视视口的宽高



理想视口:布局视口在一个设备上的最佳尺寸,理想视口下的页面便于浏览器浏览、阅读,通常是我们说的屏幕分辨率。(就是为构建手机浏览器优化的页面而添加的)

dip (设备逻辑像素)跟设备的硬件像素无关的。一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。移动端手机屏幕通常不可以设置分辨率,一般都是设备厂家默认设置的固定值,换句话说 dip 的值就是理想视口,也就是分辨率)的值

width属性:

width属性被用来控制layout viewport(布局视口)的宽度,layout  viewport(布局视口)宽度默认值是设备厂家指定的。iOS, Android基本都将这个视口分辨率设置为 980px。我们可以 width=320 这样设为确切的像素数,也可以设为device-width这一特殊值,一般为了自适应布局,普遍的做法是将width设置为device-width

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">1

width=device-width 也就是将布局视口的宽度设置理想视口。网页缩放比例为100%时,一个CSS像素就对应一个 dip(设备逻辑像素),而layout viewport(布局视口)的宽度,ideal viewport(理想视口)的宽度(通常说的分辨率),dip 的宽度值是相等的。

minimum-scale=1.0 (最小的缩放比例)

maximum-scale=1.0(最大的缩放比例)

user-scale=no (禁用了用户缩放)

书和放大镜:书是布局视口,放大镜可视适口



四、分析设计图

对于响应式网站的设计图,我们应该先分析的是网页的基本结构,然后再是针对不同屏幕大小下的差异,找到相同和不同

五、响应式网站设计实践原则


progressive enhancement  渐进增强
graceful degradation 优雅降级
断点的选择:0-480、481-800、800-14000, 1400+(小,中,大,巨屏幕)
--------------------- 
作者:Dear_Mr 
来源:CSDN 
原文:https://blog.csdn.net/Dear_Mr/article/details/71271331 
版权声明:本文为博主原创文章,转载请附上博文链接!
本文内容为转载,如原作者有异议,请联系本站撤除。
  • TOP

  • 关于我们

    上海求创科技有限公司成立于2001年,是一家专注于为客户提供高端网站策划、网站建设、网页设计、品牌网络营销以及相关的基于互联网应用服务的专业公司。

    更多

    全国客户服务热线

    400-889-1636

    网站建设,网站制作,企业网站建设,网上商城,网站推广,域名注册,求创科技-微官网 网站建设,网站制作,企业网站建设,网上商城,网站推广,域名注册,求创科技-手机网
    友情链接: 域名超市 | 苏州网站优化 | 营销型网站建设 | 企业网站建设 | 网页设计 | 网站建设 | 网站优化 | 网站设计 | IPv6 升级 | 微信开发 | H5开发 | 系统开发 | 网站维护 | 海外社会化媒体推广 | 上海网站设计 |
    热线电话:400- 889-1636 业务部:sales@dn.cn 售后服务:service@dn.cn 投诉邮箱:info@dn.cn
    地址:上海市松江区谷阳北路2399弄 御上海37号602室 邮政编码:201600
    版权所有©上海求创科技有限公司 沪ICP备13005298号-24  网站地图 沪公网安备 31010602003962号