响应式网站笔记

简介: 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适合开发功能较多的网站

相关文章
|
2月前
|
编解码 移动开发 前端开发
响应式网页设计原理与实践
【2月更文挑战第4天】 在当今互联网时代,响应式网页设计成为了各大网站和应用开发的必备技能。本文将介绍响应式网页设计的原理和实践,包括媒体查询、流动布局、弹性图片等技术,帮助读者了解如何创建适应不同设备和屏幕尺寸的网页。
|
3月前
|
编解码 前端开发 JavaScript
从0到1,打造一款完美的响应式前端网站
在当今移动互联网时代,响应式设计已经成为了前端开发中必不可少的一部分。本文将介绍如何从0到1打造一款完美的响应式前端网站,包括设计思路、技术选型、代码实现等全方位的解析。无论你是初学者还是有经验的前端开发者,都可以在本文中找到所需的知识和技能。
19 0
|
10月前
|
NoSQL 前端开发 JavaScript
DjangoChannels_vue前端搭建简易版的网页聊天功能
DjangoChannels_vue前端搭建简易版的网页聊天功能
118 1
|
11月前
|
JavaScript 前端开发 容器
熹微~~~基于Vue开发的昏暗风格的响应式网页!
熹微~~~基于Vue开发的昏暗风格的响应式网页!
115 1
|
12月前
|
前端开发 编解码 开发工具
响应式web开发
响应式web开发
94 0
|
JavaScript 前端开发
如何实现响应式网页设计
随着越来越多的人使用移动设备访问网站,响应式网页设计变得越来越重要。响应式网页设计是指网站可以自适应不同设备和屏幕尺寸,保证用户在不同设备上都能够获得一致的体验。下面介绍一些实现响应式网页设计的技术。
145 0
|
搜索推荐 数据挖掘 UED
响应式网站建设有什么特点?响应式网站有什么优点
响应式网站建设会根据不同手机、电脑、平板的不同尺寸进行识别自动调整结构布局,给访客以最佳的用户体验,响应式网站制作的页面还可以使用到微信平台,真正实现了一站多用。除此之外,响应式网站建设还有其他特点,接下来和小编一起来看看吧。
118 0
响应式网站建设有什么特点?响应式网站有什么优点
|
前端开发 iOS开发
实训-利用HTML+CSS做响应式项目网页
实训-利用HTML+CSS做响应式项目网页
120 0
实训-利用HTML+CSS做响应式项目网页
|
前端开发 JavaScript 编译器
响应式系统与React | 青训营笔记
响应式系统与React | 青训营笔记
94 0
响应式系统与React | 青训营笔记
|
编解码 前端开发 Java

相关实验场景

更多