html 之前学习响应式的笔记

响应式的设计,根据用户设备的不同,用户屏幕大小不同,提供不同的网页设计
http://mediaqueri.es/
PhoneGap 使用
2,如何模拟手机设备
chome 浏览器 在32以上
设备检测
用 device.js
device.ipad(),device.mobile,
device.portrait(), 检测设备是竖直的
device. 检测设备是水平的
device.iphone 检测设备是否是苹果手机
device.android() 检测设备是否是安卓手机
device.tablet() 检测设备是否是大手机(7寸以上)
实现跳转:window.location = "";

检测屏幕宽度,更换样式表

javascript 得到页面宽度
document.documentElement.clientWidth;
window.onrsize  window事件

window.onresize = gaibian;
视口, 就是屏幕宽度,查找苹果手机的宽度的时候,宽度居然是980;
视口让我们学习响应式很不方便,

width = device.width  命令视口的宽度
initial-scale = 1.0 命令视口默认的
mini

css3中的媒体查询,
media ="(min-width:600px;)"  简称 媒体查询
min-width  小于等于
max-width  大于等于

流式布局 就是利用父盒子的百分比

时间: 2025-01-13 09:32:26

html 之前学习响应式的笔记的相关文章

学习响应式设计笔记

                       [email protected] Contents 1.?问题背景? 2.?什么是响应式设计和自适应设计有什么不同? 3.?如何创建响应式网站 4.?经典设计流程 5.?响应式网站的参照设计 1.?问题背景? 为不同分辨率的设备提供不同的网页,曾经的手机端与PC端分别维护一份代码,显得罗嗦,维护难,功能可能不统一等等. 只用一份代码,就可以在不同的设备上获得很好的显示效果. 每个设备都得到正确的设计 更少的工作 搜索优化 曾经手机端和PC端是两个不

学习响应式设计的15个优秀网页作品

响应式的网站是指它能够适应客户端的屏幕尺寸,自动响应客户端尺寸变化.响应式设计技术用于创建可在任何设备上进行查看,并可以从桌面电脑屏幕无缝切换到智能手机的网站制作技术.下面这篇文章分享的15个国外优秀网页作品可以帮助你更好的学习响应式设计. 您可能感兴趣的相关文章 15款帮助创建响应式布局的优秀前端框架 经典网页设计:无缝过渡的响应式设计案例 让你的网站瞬间变成响应式的3个简单步骤 经典网页设计:响应式设计的国外购物网站 推荐35个新鲜出炉的响应式 Web 设计实例 Christchurch H

学习响应式设计(Learning Responsive Web Design)完整版PDF

想要为平板.手机.笔记本.大屏幕设备,甚至可穿戴设备提供最优的用户体验?那就学习响应式设计吧.这是一本内容特别全面.讲解非常透彻的入门书.特别地,通过这本书不仅能迅速掌握响应式Web设计的基本原理,还能够从头到尾了解响应式设计的工作流程:从项目启动开始,到项目最终上线为止. 只要你的工作与创建.改造或者升级网站有关系,都应该看看这本书.换句话说,不仅是前端开发人员,设计师.产品经理.项目经理,甚至后端开发人员也可以通过本书掌握响应式设计的精髓所在.这本书基于响应式设计的前沿技术和社区经验写成,汇

响应式设计笔记

关于加载查询的最佳方法,解决IE7,IE8的问题 Respond.js 宁浩网 480px 767px, 1024px, 1280px, 910px 章节1:课程介绍与基本概念 课时1课程介绍01:39 课时2响应式设计的真实例子02:33 课时3viewport - 可视窗口01:33 可视区域=窗口大小,页面大小,不一样的. 缩放的级别, <meta name="viewport" content="width=device-width, initial-scale

响应式Web设计--学习总结

这些天看了Tim Kadlec著.侯鸿儒译的<响应式Web设计实践>一书后深有体会.于是总结出以下学习响应式Web设计的要点与大家分享: 待续...

响应式布局之入门学习篇

学习响应式网站设计已经持续了一段时间,对sass,less,compass,grunt等等有了整体上的了解认识,但是由于产品的不可预知性,以及前端要求使用sass语言而且不适用bootstrap,所以很多现有的响应式框架如Bootstrap,Golden Grid system,less Framework 4 ,Skelton等都无法使用,选来选去决定使用susy框架,susy使用sass书写,同时,Susy 的设计初衷是作为 Compass 平台的一部分,所以,使用 Compass. sus

响应式编程(Reactive Programming)(Rx)介绍

很明显你是有兴趣学习这种被称作响应式编程的新技术才来看这篇文章的. 学习响应式编程是很困难的一个过程,特别是在缺乏优秀资料的前提下.刚开始学习时,我试过去找一些教程,并找到了为数不多的实用教程,但是它们都流于表面,从没有围绕响应式编程构建起一个完整的知识体系.库的文档往往也无法帮助你去了解它的函数.不信的话可以看一下这个: 通过合并元素的指针,将每一个可观察的元素序列放射到一个新的可观察的序列中,然后将多个可观察的序列中的一个转换成一个只从最近的可观察序列中产生值得可观察的序列. 天啊. 我看过

响应式编程,是明智的选择

相信你们在学习响应式编程这个新技术的时候都会充满了好奇,特别是它的一些变体,例如:Rx系列.Bacon.js.RAC等等…… 在缺乏优秀资料的前提下,响应式编程的学习过程将满是荆棘.起初,我试图寻找一些教程,却只找到少量的实践指南,而且它们讲的都非常浅显,从来没人接受围绕响应式编程建立一个完整知识体系的挑战.此外,官方文档通常也不能很好地帮助你理解某些函数,因为它们通常看起来很绕,不信请看这里: Rx.Observable.prototype.flatMapLatest(selector, [t

响应式编程介绍

响应式编程简介 (原文) 你应该对响应式编程这个新事件有点好奇吧,尤其是与之相关的部分框架:Rx.Bacon.js.RAC等等. 在缺乏好的资源的情况下,学习响应式编程成为痛苦.我开始学的时候,做死地找各种教程.结果发现有用的只是极少部分,而且这少部分也只是表面上的东西,对于整个体系结构的理解也起不了多大的作用.直接去看那些库文档同样也理解不了.比如下面这个: Rx.Observable.prototype.flatMapLatest(selector, [thisArg]) Projects