No.3 移动端web响应式开发-学习笔记

最新推荐文章于 2024-07-12 16:27:40 发布

lllll123987

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量97

点赞数

分类专栏：前端学习文章标签：前端 css3 css web

本文链接：https://blog.csdn.net/m0_62090201/article/details/121198628

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.浏览器内核

浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

2.视口

2.1 视口的概念

在 Windows的作图函数中，涉及逻辑坐标到设备坐标的转换。这里提到的窗口（window）、视口(viewport)是对应的概念。视口是与设备相关的一个矩形区域，坐标单位是与设备相关的“像素”，大多数情况下，视口与客户区相同。窗口的坐标是逻辑坐标，与设备无关，可能是像素、毫米或者英寸。窗口坐标的原点与视口坐标的原点始终对应于同一点。对于同一个图形，用窗口坐标系统表达的该区域的长和宽与视口的坐标系统表达的长和宽是不同的。二者就定义了这两个坐标系统的比例关系。程序作图时，使用的坐标总是是窗口坐标。而实际的显示或输出设备却各有自己的坐标。

分辨率：屏幕的像素数量。

网页版心是固定的，分辨率越大、像素数量越多、网页占据的真实宽度越小、字就越小。

<body>
    <h1></h1>
    <script>
        //获取元素
        var nH1 = document.getElementsByTagName('h1')[0];
        //设置元素文本内容
        nH1.innerHTML = document.documentElement.clientWidth;
    </script>
</body>

显示浏览器宽度：document.documentElement.clientWidth

980是视口宽度viewport，是所有设备初始视口宽度。

自定义移动设备视口宽度：

    <!--配置移动端视口-->
    <meta name="viewport" content="width=300px">

设置浏览器宽度之后，浏览器会按照300px的宽度显示页面。

2.2 视网膜屏幕概念

设备像素比：window.devicePixelRatio

        //获取元素
        var nH1 = document.getElementsByTagName('h1')[0];
        var nH1 = document.getElementsByTagName('h1')[1];
        //设置元素文本内容
        nH1.innerHTML = "当前的视口宽度"+document.documentElement.clientWidth;
        nH1.innerHTML = "当前的设备像素比"+window.devicePixelRatio;

content属性值：

width=device-width 约束视口宽度

initial-scale=1.0 初始视口宽度为1倍

minimum- scale=1.0 最小视口宽度为1倍

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

3.百分比布局

各设备视口约束不同，我们希望页面在手机上是没有版心的，所以我们不能设置固定像素，可以设置弹性盒子。

百分比布局/流式布局

各属性参考对象：

width：父盒子width、body（没有父盒子时）

height：父盒子height

padding：父元素width

margin：父元素width

border：不支持设置百分比为单位

绝对定位元素如果设置百分比，此时width、height、padding，分别参考的是距离自己最近的有定位的祖先元素的width、height、width

属性

calc（）计算属性
min-和max-属性
flex布局

容器的属性

flex- direction属性
flex- wrap属性
flex- flow属性
justify- content属性
align- items属性
align- content属性

项目的属性

order属性
flex- grow属性
flex- shrink属性
flex- basis属性
flex属性
align- self属性

rem单位

em单位

rem单位

高度的等比例变化

4.属性扩展：

5.rem

携程网项目

事件流

DOM0级事件

DOM2级事件

低版本IE事件

事件轮子

阻止事件传播

阻止默认事件

touch事件参数

拖拽模型

zepto

手机拖动轮播图

swiper插件

手机滚滚屏项目

响应式页面

媒体查询

Bootstrap

栅格系统搭建页面布局项目

lllll123987

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
No.3 移动端web响应式开发-学习笔记

浏览器内核视口百分比布局属性扩展：rem携程网项目事件流DOM0级事件DOM2级事件低版本IE事件事件轮子阻止事件传播阻止默认事件touch事件参数拖拽模型zepto手机拖动轮播图swiper插件手机滚滚屏项目响应式页面媒体查询Bootstrap栅格系统搭建页面布局项目...
复制链接

扫一扫