响应式网站笔记

简介: 1.页面检测device.js 2.js控制styledocument.documentElement.clientWidth 窗口宽度兼容ie6onload 加载完成onresize 调整尺寸onscroll 滚动滚轮 3.

1.页面检测
device.js

2.js控制style
document.documentElement.clientWidth 窗口宽度兼容ie6
onload 加载完成
onresize 调整尺寸
onscroll 滚动滚轮

3.视口
iphone中屏幕宽度是980
iphone分辨率1136*640 三星note3分辨率1920*1080 但是视口都是980
分辨率和视口没有关系

约束视口,content包含5个规则
<meta content="width=device-width, //命令视口的宽度,变为设备的宽(1024*768为标准,通常为320~380之间)
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no" //不允许用户缩放
name="viewport" id="viewport">

css3媒体查询(ie9开始支持)
<link rel="stylesheet" href="style1.css" type="text/css" media="(min-width:640px) and (max-width:750px)">

min-width max-width box-sizing:border-box
jqmobile适合开发功能较多的网站

相关文章
|
5月前
|
编解码 移动开发 前端开发
响应式网页设计原理与实践
【2月更文挑战第4天】 在当今互联网时代,响应式网页设计成为了各大网站和应用开发的必备技能。本文将介绍响应式网页设计的原理和实践,包括媒体查询、流动布局、弹性图片等技术,帮助读者了解如何创建适应不同设备和屏幕尺寸的网页。
126 6
|
5月前
|
编解码 前端开发 JavaScript
从0到1,打造一款完美的响应式前端网站
在当今移动互联网时代,响应式设计已经成为了前端开发中必不可少的一部分。本文将介绍如何从0到1打造一款完美的响应式前端网站,包括设计思路、技术选型、代码实现等全方位的解析。无论你是初学者还是有经验的前端开发者,都可以在本文中找到所需的知识和技能。
61 0
|
前端开发 UED
响应式Web设计的原理与实践
响应式Web设计的原理与实践
|
前端开发 编解码 开发工具
响应式web开发
响应式web开发
111 0
|
JavaScript 前端开发
如何实现响应式网页设计
随着越来越多的人使用移动设备访问网站,响应式网页设计变得越来越重要。响应式网页设计是指网站可以自适应不同设备和屏幕尺寸,保证用户在不同设备上都能够获得一致的体验。下面介绍一些实现响应式网页设计的技术。
182 0
|
前端开发 iOS开发
实训-利用HTML+CSS做响应式项目网页
实训-利用HTML+CSS做响应式项目网页
158 0
实训-利用HTML+CSS做响应式项目网页
|
前端开发 JavaScript 编译器
响应式系统与React | 青训营笔记
响应式系统与React | 青训营笔记
116 0
响应式系统与React | 青训营笔记
|
编解码 前端开发 Java
|
Web App开发 移动开发 前端开发
|
Web App开发 编解码 JavaScript