『壹』 响应式布局中的js功能怎么解决
如果涉及到用js控制css宽度，边距等问题在写响应式的过程中和写css一样，不要写成固定比，写成百分比的样式即可这样js同样也能够在手机端，平板端，正常运行。
『贰』 响应式开发中js引用的问题
你是想根据屏幕大小来获取不同的js文件吗<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title> 获取屏幕宽高 </title> <style type="text/css"> body,div{ margin:0px; padding:0px; } #show{ width:400px; height:400px; margin:100px auto; background:#969696 ; text-align:center; } </style> <script type="text/javascript"> function mess(){ var str = "屏幕尺寸基本信息:";// 这里你是中文的分号，故而报错 str += "屏幕宽度:"+screen.width+"像素"; str +="屏幕高度:"+screen.height+"像素"; str +="屏幕可用宽度"+screen.availWidth+"像素"; str +="屏幕可用高度"+screen.availHeight+"像素"; document.getElementById("show").innerHTML = str; } </script> </head> <body onload="mess()"> <div id="show"> </div> </body></html>
『叁』 chart.js 怎么做响应式
你可以问问竹子建站的他们做的响应式网站
『肆』 响应式布局该怎么设计
三、响应式布局该怎么设计?那在我们的实际项目中应该怎么去设计呢?在以往我们设计网站的时候都会受到不同浏览器的兼容性的困扰，现在还要来个不同尺寸设备，我们该怎么淡定下来呢?有需求就会有解决方案，呵呵，说到响应式布局，就不得不提起CSS3中的Media Query（媒介查询），这可是个好东西，易用、强大、快捷……Media Query是制作响应式布局的一个利器，使用这个工具，我们可以非常方便快捷的制造出各种丰富的实用性强的界面。接下来就一起来深入的了解Media Query。当浏览器的分辨率小于1024px的时候，则通过Media Query预设的样式表来将页面的宽度设置为百分比显示，这样子页面的结构元素就会根据浏览器的的尺寸来进行相对应的调整。同理，当浏览器的可视区域改变到某个值（假如为650px）的时候，页面的结构元素根据Media Query预设的层叠样式表来进行相对应的调整。看看我们的例子： /* 当浏览器的可视区域小于980px */ @media screen and (max-width: 980px) { #wrap {width: 90%; margin:0 auto;} #content {width: 60%;padding: 5%;} #sidebar {width: 30%;} #footer {padding: 8% 5%;margin-bottom: 10px;} } /* 当浏览器的可视区域小于650px */ @media screen and (max-width: 650px) { #header {height: auto;} #searchform {position: absolute;top: 5px;right: 0;} #content {width: auto; float: none; margin: 20px 0;} #sidebar {width: 100%; float: none; margin: 0;} }通过上面我们就可以监测浏览器的可视区域变化的是时候我们的页面结构元素也会相对应的变化，当然你可以再多设置几个尺寸的监测层叠样式表，这样子就可以根据不同尺寸设备来进行响应式的布局。为了更好的显示效果，我们往往还要格式化一些CSS属性的初始值：/* 禁用iPhone中Safari的字号自动调整 */ html { -webkit-text-size-adjust: none; } /* 设置HTML5元素为块 */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } /* 设置图片视频等自适应调整 */ img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ } .video embed, .video object, .video iframe { width: 100%; height: auto; }最后要注意的是在页面的头部<head></head>之间加上下面这句∶<meta name="viewport" content="width=device-width; initial-scale=1.0">meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。参数设置∶width – viewport的宽度height – viewport的高度initial-scale – 初始的缩放比例minimum-scale – 允许用户缩放到的最小比例maximum-scale – 允许用户缩放到的最大比例user-scalable – 用户是否可以手动缩放最后对于在IE浏览器中不支持media query的情况，我们可以使用Media Query JavaScript来解决，只需要在页面头部引用css3-mediaqueries.js即可。示例：
『伍』 H5响应式布局 响应式图片 响应式布局网站怎么写
有很多中写法, 1.媒体查询(@media),具体怎么使用可以去w3c去查询,很好用,这个相当于css中的js命令,可以规定在浏览器可视窗口的宽度分辨率在多少的情况下执行那部分的css代码.一般用于与其他css并排使用. 2.vw,vh布局,同样可以查查w3c里面有vw和vh详细解释,简单说就是可视化窗口的百分比长度,比如20vw指可视化窗口的20%长度,经过浏览器计算,最终换算为px单位, 一般用于长度单位使用,如果你会less的话,还可以声明less变量,将一个固定设计图的尺寸写在里面供其他使用,例子: @vw:19.2vw//此处声明变量,并将@vw赋值为19.2vw,比如设计图的尺寸为1920px,当然 没有这么大的,1920/100就是vw前面的由来 .box{ height:20/@vw; width:100/@vw //这里这么写就是说,你设计图本身是1920px,里面其中的一个各自为宽度100px,高度 20px,那么可以将px固定单位换成/@vw这种可变单位,从而达到页面内容跟随网页可 视区域大小去变动 } 3.用js去控制font-size的值,这个可以在网上去搜索,有相应的js文件,直接引入,然后类似于上面 将px单位换成rem即可,不过按照需要你自己需要手动更改换算比例,因为一般都是750px的 设计图为基础,具体我这不细说了哈 4.百分布局,很久不用了,高度控制不好整体网页瘫痪,反正我是不用了,有了vh和vw,百分布局原理与这个类似,当有浏览器不支持vw,vh命令的时候可以使用百分布局,不过ie现在谁还用…….. 暂时说这些把,还有别的话,望大牛补充
『陆』 DW怎么做响应式，如下图广告图像特效（JS+CSS从网上找来的)
你看看这个，就是适应不同的浏览器
要是感觉不好的话可以追问
要是感觉好的话
采纳奥
『柒』 什么是响应式Web设计怎样进行（4）
但是对于页面中的文字内容信息来说，则不能简单的只从"同比缩小"和"调整布局结构"这两方面去处理。对于手机等移动设备来说，在文字内容方面，已经有了很多最佳实践方式和指导原则：简化的导航、更易聚焦的内容、以信息列表代替传统的多行文案内容等。响应式Web设计的思想，一方面要保证页面元素及布局具有足够的弹性，来兼容各类设备平台和屏幕尺寸；另一方面，则是增强可读性和易用性，帮助用户在任何设备环境中都能更容易的获取最重要的内容信息。有一条样式代码，我们已经使用了多年：display: none;我们可以在一个针对某类小屏幕设备的样式表中使用它来隐藏掉页面中的某些块级元素，也可以使用前文的方法，通过JS判断当前硬件屏幕规格，在小屏幕设备的情况下直接为需要隐藏的元素添加工具类class。比如，对于手机类设备，我们可以隐藏掉大块的文字内容区，而只显示一个简单的导航结构，其中的导航元素可以指向详细内容页面。注意，不要使用visibility: hidden的方式，因为这只能使元素在视觉上不做呈现；display属性则可帮助我们设置整块内容是否需要被输出。对于移动设备来说，避免这些不必要的资源浪费还是很重要的。我们来看一个简单的示例：图中上半部分是大屏幕设备所显示的完整页面，下面的则是该页面在小屏幕设备的呈现方式。页面HTML代码如下：<p class="sidebar-nav"><a href="#">Left Sidebar Content</a> | <a href="#">Right Sidebar Content</a></p><div id="content"><h2>Main Content</h2></div><div id="sidebar-left"><h2>A Left Sidebar</h2></div><div id="sidebar-right"><h2>A Right Sidebar</h2></div>下面是默认的主样式表，其中，我们要隐藏掉链接导航部分(sidebar-nav)，因为默认样式适用的设备屏幕会足够大，足够显示包括两个侧边栏在内的所有内容。#content{width: 54%;float: left;margin-right: 3%;}#sidebar-left{width: 20%;float: left;margin-right: 3%;}#sidebar-right{width: 20%;float: left;}.sidebar-nav{display: none;}下面是用于小屏幕移动设备的样式表代码。现在，我们要隐藏掉两个侧边栏，并使sidebar-nav显示出来。借助JavaScript，当用户点击sidebar-nav中的链接时，对应的侧边栏可以恢复显示。当然，触发恢复显示的方式有很多种，即可以通过JS改变侧边栏的display属性值，也可以为其添加额外的布局样式。#content{width: 100%;}#sidebar-left{display: none;}#sidebar-right{.sidebar-nav{display: inline;}现在，我们的页面已经可以随着设备和屏幕规格的变更，响应式的做到元素的同比缩放、布局结构的改变、内容的优化调整。特别是对于手机设备，我们还要在实践过程中注意一些该类设备共有的设计指导原则。比如，针对手机设备，使用一个特定的样式，将页面原有的文字导航元素变为更易操作的图标形式。下面的一些文章资源可作参考阅读：Mobile Web Design Trends For 20097 Usability Guidelines for Websites on Mobile Devices触屏与鼠标触屏设备已经成为主流。虽然目前多数触屏设备还是小屏幕类型的产品，比如手机，但是市场上越来越多的大屏幕设备也开始使用触屏技术；且不说iPad一类的平板电脑，就连一些笔记本和台式机也加入了这一行列。比如HP Touchsmart tm2t，即使用传统的键鼠设备，同时也加入了触屏技术。相比于传统的基于鼠标指针的互动，触屏技术显然带来了截然不同的交互方式与相应的设计规范；两者又有各自所适用的领域。所幸，要使我们的设计方案同时满足这两类设备的规范，并非一件难事，只是有些地方需要注意。比如，触屏设备无法反映CSS定义的hover行为及相应的样式，因为它没有鼠标指针的概念，手指点击就是click行为。所以不要让任何功能依赖于对hover状态的触发。有兴趣的话，可以读读这篇"Designing for Touchscreen"，这里提到的很多建议即有利于改进针对触屏设备的设计方式，同时也不会削弱传统键鼠设备上的用户体验。比如，放在页面右侧的导航列表可以对触屏设备的用户更加友好。因为多数人习惯用右手点击操作，而左手负责握住设备；这样，放在右侧的导航列表即方便右手的点击，又可以避免被握着设备的左手不小心触碰到。而这一点与键鼠设备用户的习惯完全不矛盾。
『捌』 JS实现列表的响应式排版(推荐)
先给大家展示下效果图，如果感觉还不错，请参考实现代码。一、每行固定个数：保证排版的美观.listli{width:20%;display:inline-block;*display:inline;*zoom:1;overflow:hidden;}二、随页面宽度调整个数和大小：保证图文的可读性.listli{width:20%;display:inline-block;*display:inline;*zoom:1;overflow:hidden;}1、媒体查询控制宽度@mediascreenand(max-width:1280px){.list-table1li{width:25%}}@mediascreenand(max-width:600px){.list-table1li{width:33.3%}}@mediascreenand(max-width:400px){.list-table1li{width:50%}}方便、但存在兼容性2、JS控制$(window).resize(function(){resizeList();})functionresizeList(){vars_width=$(window).width();//console.log(“s_width:”+s_width);if(s_width>600&&s_width<=1280){$(“.list-table1li”).css(“width”,”25%”);}elseif(s_width>400&&s_width<=600){$(“.list-table1li”).css(“width”,”33.3%”);}elseif(s_width>200&&s_width<=400){$(“.list-table1li”).css(“width”,”50%”);}elseif(s_width<=200){$(“.list-table1li”).css(“width”,”100%”);}}$(window).resize（）实时获取浏览器的宽度注意事项：1、图片不变形.a-common{width:auto;height:auto;}.a-commonimg{width:100%;height:auto;}2、文字溢出处理.title,.subtitle{width:auto;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}以上所述是小编给大家介绍的JS实现列表的响应式排版，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
『玖』 响应式网页设计怎么学习 怎么提高学习效率
响应式我是几天就学会的，在这之前只会基本的网页制作，而且还不怎么会处理浏览器兼容。在制作响应式网页直接，你只需要明确一个要点，就是设计网页布局的时候千万别凌乱，而且要相对严格的控制盒子的位置。响应式网页我一般的布局是由上至下一个盒子一个盒子的慢慢堆下来，盒子里面再从左至右摆放，严格控制高度宽度不出现超出和错位。这样可以最大避免在进行响应式处理的时候出现各种问题，增加代码量，代码的精简和最开始从布局入手直接决定后面的进展，也是最关键的地方。其次就是css3各种属性的使用，其实响应式不一定非得h5，主要起作用的就是css3的新支持，对于我的经验而言，本质上说要兼容IE8，用html4比较好。在css3中对于屏幕分辨率的判断（具体代码你可以网络），基本决定了响应式的一切，其实bootstrap的栅格布局就是很好的参考，不同分辨率下不断减小的div宽度，和自动跟随内容增长的盒子高度，都是很好的借鉴。同时响应式也需要一些js的基础，对于屏幕分辨率的监控，我现在对于兼容问题就完全靠js来解决了。上述这么多就是个人经验的简述，其实关键是html的基础决定了一切，只要做多了实际项目，你的思路就会变得非常明确。我当时是怎么学会的呢？答案是公司逼的，学不会响应式就可能过不了考核期，于是自己短短四天就做项目学会了，最明显的感觉就是，只要项目做多了，甚至是研究其它网页的代码，都可以感觉到其中的规律。
