html 之前学习响应式的笔记

时间:2022-04-15 20:03:39

响应式的设计,根据用户设备的不同,用户屏幕大小不同,提供不同的网页设计
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  大于等于

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