jQuery或js将网页保存到手机相册

设置宽度为100%，列表就可以适应屏幕。同时如果你的头像要保证是正方形，就要使用js计算并动态赋值宽度和高度。如使用jq语句$(id)css("width","150px");$(id)css("height","150px");就是一个正方形，当然，不一定是150px，具体的宽度也可以动态获取屏幕并计算。

$(window)height();//是文档窗口高度

$("div")offset()top//是标签距离顶部高度（没有到下面的距离，比如$("div")offset()down）

$("div")offset()left//是标签距离右边高度（没有到下面的距离，比如$("div")offset()right）

$(document)scrollTop();//是滚动条高度

$("div")height();//是标签高度

你要的高度+$("div")height()+[$("div")offset()top-$(document)scrollTop()]=$(window)height();

经过简单的数学变换即可得到你要的值了

获取页面某一元素的绝对X,Y坐标，可以用offset()：

var X = $(‘#DivID’)offset()top;

var Y = $(‘#DivID’)offset()left;

获取相对(父元素)位置:

var X = $(‘#DivID’)position()top;

var Y = $(‘#DivID’)position()left;

通过getBoundingClientRect方法获取对象位置，包含： left , top , right , bottom 4个参数值。

响应式Web设计的方法

介绍完响应式Web的背景和概念之后，是时候该介绍具体的实现方法了，其实响应式Web设计的方法很简单，就是利用CSS3的媒体查询Media Queries和Viewport来解决问题的。

首先我们一起来看看Media Queries，这里我只会对其做一个简单的列举介绍。

通过媒体查询的设置，我们可以根据屏幕宽度、屏幕方向等各个属性来加载不同场景下不同的CSS文件来渲染页面的视觉风格。具体的使用方法有以下两种：

1、通过link标签：

<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="testcssbywidth1css" />

示例代码代表当当前屏幕宽度小于479px的时候，加载testcssbywidth1css文件来渲染页面。

2、CSS中直接设置：

@media screen and (max-width:479px) {

/ 具体的CSS属性设置 /

}

对于Media Queries的一些常用属性，只对常用的几个做一个简单列举说明，其他的属性请各位自行查阅相关资料：

width：描述终端设备显示区域的宽度，接受max/min的前缀；

height：描述终端设备显示区域的高度，接受max/min的前缀；

device-width：描述终端设备屏幕的宽度，接受max/min的前缀；

device-height：描述终端设备屏幕的高度，接受max/min的前缀；

orientation：描述终端设备处于横屏还是竖屏的状态，取值分别为：landscape/portrait。

当我们调整浏览器大小的时候，上面通过媒体查询属性的 *** 作就可以完成响应式Web设计的工作，但是这却不能满足移动终端的浏览器，因为移动浏览器默认页面是为宽屏幕设计的，所以会把他缩小来适应小屏幕，但是终端设备却无法识别正确的宽度，所以光靠媒体查询是解决不了移动终端设备的响应式Web设计的。

不用js，css也可以。

// 大屏幕，当屏幕宽度等于641px或者大于641px的时候

@media screen and (max-width: 641px) {

    container { width: 640px; margin: 0 auto; }

}

// 小屏幕，当屏幕最大宽度600px或者小于600px的时候

@media screen and (max-width: 640px) {

    container { width: auto; margin: 0; }

}

js的话，判断一下windowinnerWidth

var ww = windowinnerWidth

if (ww < 640) {

    documentdocumentElementsetAttribute('class', 'container-mobile')

} else {

    documentdocumentElementsetAttribute('class', 'container')

}container { width: 640px; margin: 0 auto; }

container-mobile { width: auto; margin: 0; }

1、引入外部jquery文件

比如：

<script src="Scripts/jquery-132minjs" type="text/javascript"></script>

2、点击按钮时的JQuery代码

$(document)ready(function () {

 $("#go")click(function () {       

 /属性/       

 $("#go2")css({ "position": "absolute", "text-align": "center", "top": "0px", "left": "0px", "right": "0px", "bottom": "0px", "background": "red", "visibility": "visible", "filter": "Alpha(opacity=90)"

 });       

 /高为屏幕的高/       

 $("#go2")css({           

     height: function () {           

         return $(document)height();       

     },           

     width:"100%"        

 });    

});

});

3、html页面代码

<asp:Button ID="go" runat="server" Style="width: 380px; position: absolute; top: 249px;left: 425px; background-color: Green; height: 65px;" Text="后台执行程序，前台遮盖，运行完毕后自动消失" />

<div id="go2">

 正在提交数据

</div>

直接调用即可,参数可根据实际情况选择,具体可选参数如下:

windowopen d出新窗口的命令；

'pagehtml' d出窗口的文件名；

'newwindow' d出窗口的名字（不是文件名），非必须，可用空''代替；

height=100 窗口高度；

width=400 窗口宽度；

top=0 窗口距离屏幕上方的象素值；

left=0 窗口距离屏幕左侧的象素值；

toolbar=no 是否显示工具栏，yes为显示；

menubar，scrollbars 表示菜单栏和滚动栏。

resizable=no 是否允许改变窗口大小，yes为允许；

location=no 是否显示地址栏，yes为允许；

status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；

以上就是关于jQuery或js将网页保存到手机相册全部的内容，包括:jQuery或js将网页保存到手机相册、jquery怎么获取元素距离屏幕的位置、jquery.touchslider触屏怎么实现响应式等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！