文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

移动端web开发入门笔记

按照刚刚的理论，元素的宽度是元素的宽度的100%，我们又知道元素的宽度是浏览器窗口的宽度。...不管html尺寸是多少（也许你会在css或者是html中给元素附上width属性，度量元素大小的属性是document.documentElement.offsetWidth/Height...layout viewport就是一个页面渲染之后具有固定大小的大框，跟之前提到PC上的概念相似，我们知道它的大小是由浏览器特性来决定的，在PC端就是等于窗口大小，但在移动端不同浏览器的值不同，比如Safari...当浏览器窗口缩小时，内容会被剪掉，实际上由于viewport的原因，这种固定大小的页面在移动端的展示也是很不友好的。...%（流式布局） 流式布局实际上就是百分比宽度 + 固定高度，当前国内百度的移动端页面就是这么做的。当浏览器宽度缩小，容器也跟着缩小，当设备屏幕较小时，体验也会好一点。

1.7K90

移动端web开发入门笔记

按照刚刚的理论，元素的宽度是元素的宽度的100%，我们又知道元素的宽度是浏览器窗口的宽度。...不管html尺寸是多少（也许你会在css或者是html中给元素附上width属性，度量元素大小的属性是document.documentElement.offsetWidth/Height...layout viewport就是一个页面渲染之后具有固定大小的大框，跟之前提到PC上的概念相似，我们知道它的大小是由浏览器特性来决定的，在PC端就是等于窗口大小，但在移动端不同浏览器的值不同，比如Safari...当浏览器窗口缩小时，内容会被剪掉，实际上由于viewport的原因，这种固定大小的页面在移动端的展示也是很不友好的。...%（流式布局） 流式布局实际上就是百分比宽度 + 固定高度，当前国内百度的移动端页面就是这么做的。当浏览器宽度缩小，容器也跟着缩小，当设备屏幕较小时，体验也会好一点。

1.1K10
您找到你想要的搜索结果了吗？
是的
没有找到

如何删除渲染阻止JS 和 CSS以提高网站速度

它呈现了新的颜色、框阴影、不透明度等。JavaScript 非常适合添加复杂的用户界面控件。然而，Javascript 在资源上比 CSS 更重。...如果您注意到您的网页正在使用 JavaScript 来弥补以前版本的 CSS 的不足之处，您应该更改它并用 CSS 替换所有不必要的 JavaScript——在可能的情况下。这将使网页加载速度更快。...消除所有不必要的脚本 JS 和 CSS 的目的是将功能扩展到网页，并在 HTML 不能的地方添加逻辑。然而，HTML 5.3 带来了新的标签，这将使一些 CSS 和 JS 操作变得不必要。...其中一些使用 AI 来缩小代码、更改加载顺序并用更高效的代码和脚本替换未充分利用的脚本。 一些用于脚本优化的最佳插件包括： WP Rocket：这是最流行的网页优化插件之一。...您可以将其用于快速缓存、参考、压缩和缩小。 Autoptimize：这可以推迟和消除不必要的脚本，集成内联 CSS 并缩小脚本、HTML 和图像。

3K20

如何使用LSCache，OpenLiteSpeed和Cyber​​Panel安装WordPress

列出网站 一旦网站面板启动，你将在屏幕上有以下选项： 网站信息 5.在此窗口中，打开文件管理器并从public_html文件夹中删除所有内容。...用LSCache安装WordPress 6.在路径框中，如果您希望WordPress安装在网站文档根目录下，请不要输入任何内容。 如果你输入任何路径，它将相对于网站主目录。...举一个例子：当服务index.html时 ，HTTP / 2可以合理地假定浏览器也想要包含的CSS和JS文件，并且也会推送它们，而不会被询问。...可以排除一些CSS，JS和HTML被缩小或组合。 在相应的框中输入这些资源的URL，每行一个，将其排除。...您可以从服务器> PHP>安装扩展选项卡通过Cyber​​Panel安装缺少的扩展。 首先从下拉列表中选择您要安装扩展名的PHP版本。 在搜索框中输入扩展名，最后点击安装安装缺少的扩展名。

2.7K50

从box-sizing:border-box属性入手，来了解盒模型

背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办？...为了避免这种问题，可以使用属性box-sizing来调整框模型。使用border-box，来将框模型更改成这个新的模型。...box-sizing属性用于更改用于计算元素的宽度和高度默认的CSS盒子模型，可以使用此属性来模拟不正确支持CSS盒子模型规范的游览器行为。...详情介绍可以查看之前的文章：实现输入框input在获得焦点时外边框不变蓝 点击打开链接 （5）CSS框类型，通过display属性来设定元素的框类型： 最常见的display...而max-width:100%限制了图像的宽度使它的最大宽度与父容器的宽度相等。因此，当父容器宽度缩小到小于图像的宽度时，图像会一起缩小。

1.3K10

Python Qt GUI设计：UI界面可视化组件、属性概述（基础篇—3）

，本篇博文来让我们简单了解一下吧~ 1、界面组件 在Qt Designer中，提供了八大类界面可视化组件分别为：布局组件（Layouts）、分隔组件（Spacers）、按钮组件（Buttons）、表项视图...sizePolicy属性 sizePolicy属性用于说明组件在布局管理中的缩放方式，当部件没有在布局管理器中时，该设置无效。...实践可参见：Python-PyQt5开发学习笔记(二)：Layout（布局） minimumSize属性 mimimumSize属性表示组件能被缩小到的最小尺寸，单位为像素，缩小到该尺寸后不能再进一步缩小了...statusTip属性 statusTip属性保存statusTip提示信息，statusTip提示信息在鼠标放到控件上时在窗口的状态栏显示提示信息，如果窗口无状态栏则不显示。...styleSheet属性 styleSheet属性是定义组件外观的属性样式表，在Qt中styleSheet样式表是类似于html的css样式一样的方法，只是专门为Qt中的部件开发的。

5.3K40

从box-sizing:border-box属性入手，来了解盒模型

背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办？...为了避免这种问题，可以使用属性box-sizing来调整框模型。使用border-box，来将框模型更改成这个新的模型。...box-sizing属性用于更改用于计算元素的宽度和高度默认的CSS盒子模型，可以使用此属性来模拟不正确支持CSS盒子模型规范的游览器行为。...③border即CSS框的边界是一个分割层，位于内边距的外边缘以及外边距的内边缘之间；             ④margin即外边距代表CSS框周围的外部区域。...详情介绍可以查看之前的文章：实现输入框input在获得焦点时外边框不变蓝  点击打开链接 （5）CSS框类型，通过display属性来设定元素的框类型：             最常见的display

1.5K20

JS:用rem来做响应式开发

（我现在知道的尚浅）目前我了解有 1.百分比法： 顾名思义，页面的元素的margin，padding，width，height，等等都用%来计算，CSS中的百分比中的百指的是什么，指的是父元素，所有百分比都是这样的...2.媒体查询： 这个是css3中给出的，我们要解决的问题是适应手机屏幕，这个媒体查询正是为解决这个问题而生，媒体查询的功能就是为不同的媒体设置不同的css样 式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等...那就要用到js在页面加载时获取window的宽度（浏览器窗口的宽度）$(window).width();在开发手机页面的时候，一般我们设置最大宽度为640px，因为640px可以保证在至今最宽的手机上显示时网页两端刚好贴合屏幕...} 注意这里有一个小坑，当你把这个小demo拿到谷歌浏览器里面验证的时候，你会发现开始这3个div会随着你浏览器窗口缩小而缩小，到达某个值后就不动了，原因是谷歌浏览器默认支持html...的font-size最小值为10px;在小于这个值就不会再小了，这是我当时碰到的问题花了快两个小时上网找，一遍遍演示也都没想明白，最后终于查到这么个非人为原因.

6.1K10

VSCode之快捷键和常用插件

一、两种重要使用 1.1 主命令框 Command Palette 最重要的功能就是 F1 或 Ctrl+Shift+P 打开的命令面板了，在这个命令框里可以执行VSCode的 任何一条命令，可以查看每条命令对应的快捷键...按一下Backspace会进入到Ctrl+P模式里 1.2 Ctrl+P模式 在Ctrl+P下输入>又可以回到主命令框 Ctrl+Shift+P模式。...在Ctrl+P窗口下还可以：   1) 直接输入文件名，快速打开文件   2) ? 列出当前可执行的动作   3) !...： Ctrl+Shift+L Ctrl+D 下一个匹配的也被选中 (在 sublime 中是删除当前行，后面自定义快键键中， 设置与 Ctrl+Shift+K 互换了) 回退上一个光标操作： Ctrl...，对于一个有视觉强迫症的人是必须要的 3）HTML Snippets 支持HTML5的标签提示 4）HTML CSS support css自动补齐 5）JS-CSS-HTML Formatter

1.9K10

ps切图必知必会

将原型设计图进行还原,承接UI,最终实现产品经理意图,实现静态页面效果展现 从UI设计师那拿到psd文档,进行切图,抠图,测量,简单的图片处理操作(更改字体,吸字体颜色等操作),利用web技术(html...,图层的上下关系与后面的数字没有系,与他的排列顺序有关,图层越靠上,层级就越高,可以手动的拖拽,调整层级关系,通过它来切图,去除矩形选框ctrl+D,或者鼠标点击一下矩形选框,在点图片区域的任意一部分，...+鼠标滚轮)–>调出参考线–>矩形框选中元素–>复制(ctrl+c)—>粘贴(ctrl+v)–>矩形框–>删除图标的空白区(delete)->结合菜单栏工具左上方的新选区,添加到新选区,从选区中删除综合使用...方法一:使用矩形框工具,在空白区选一个区域,复制,然后粘贴,拖动该复制的区块盖住文字或者图片即可即可 方法二:使用自由变换(推荐使用):在空白区选一个空白矩形框—>ctrl+T–>选择性的覆盖即可 ?.../png)特点 JPG/GIF/PNG的应用 如何抹掉psd原文件或者图片的文字 添加前景色和删除背景色 如何在网页中抠图 合成雪壁图(css sprite) 使用雪碧图结合定位嵌入到网页中去

2.9K20

如何做一个自适应网页？

在开始之前我们先了解几种布局 固定布局/弹性布局 固定布局顾名思义，就是一个固定大小的设计，然后让内容在大屏中居中，小屏中有滚动条 body{ width: 1200px; margin...: 0 auto; } 弹性布局其实就是根据浏览器窗口的大小更改大小，使用相对值（百分比、rem、em、vh、vw等）来进行，flex grid也属于自适应布局方式，另外max-width/min-width...float进行多列布局，但是出现css3之后，现在我们通常使用flex、grid等现代的方式进行，本质是通过参照容器的空间大小，缩小或者放大每个元素分布的空间，达到动态平衡，更改flex-grow以及flex-shrink...的值，达到预期的效果 而grid是一种二维的方式进行布局，这两者都可以达到动态更改元素所占空间大小的方式，然后再通过一些相对单位进行内容的填充，常用的一些相对单位 1vw - 窗口宽度的1%，当窗口宽度减小的时候...(2).png 这种自适应的方式在切换起来很流畅，并且布局的改动在grid的加成下变得异常简单明了 其实最本质的内容就是对不同的屏幕加载不同的css样式，你也可以使用媒体查询的方式加载css样式 <link

39520

前端面试之CSS重点概念精讲

从「表现」上：可以和文字在一行显示 幽灵空白节点 在H5文档声明中，内联元素的所有解析和渲染表现就，如同每个「行框盒子」的前面有一个空白节点一样，这个空白节点「永远透明，不占据任何宽度」。...，只需要考虑后代元素 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中 层叠上下文的创建（3类） 由一些CSS属性创建 「天生派」 「页面根元素天生具有层叠上下文...---- CSS 优化处理 (6个) 「内联首屏关键」CSS 但是由于TCP的初始拥塞窗口的原因，导致这种方法只能针对CSS文件小的情况 「异步加载」CSS 使用rel="preload"对CSS类资源进行异步加载...就是给HTML元素加上某些CSS属性，比如3D变换，将其提升成一个合成层，「独立渲染」。...:scale代替宽度、高度的修改； ---- Css预编译语言 Css预编译语言在前端里面有三大优秀的预编处理器，分别是： sass less stylus 虽然各种预处理器功能强大，但使用最多的，还是以下特性

2.4K30

CSS基础（六）：浮动深入

参考了《CSS彻底设计研究》的文章，说的很不错，所以拿来做笔记。 浮动 在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素边界；而在竖直方向和兄弟元素依次排列，不能并排。...设置第1个浮动div  可以看到标准流中的Box-2的文字在围绕着Box-1排列，此时Box-1的宽度不再伸展，而是能容纳下内容的最小宽度。那么Box-2的盒子宽度范围如何确定呢？...用Firebug可以发现，是与Box-1的左边框重合，因为此时Box-1已经脱离标准流，标准流中的Box-2会顶到原来Box-1的位置，而文字会围绕着Box-1排列。 <!...当慢慢缩小浏览器窗口时，Box-2和Box-3的距离会越来越小，文字会布满空间，但缩小到一定程度时，Box-3会被挤到下一行，但仍保持向右浮动。 ?...当慢慢缩小浏览器窗口时，Box-2和Box-3的距离会越来越小，文字会布满空间，但缩小到一定程度时，Box-3会被挤到下一行，但仍保持向左浮动。 ?

40710

将 SVG 与媒体查询结合使用

在 HTML 文档中，我们可以根据视口的条件显示、隐藏或重新排列页面的某些部分。例如，如果浏览器窗口的宽度为 480 像素，我们可能会将导航从水平导航移动到垂直可折叠列表。...我们可以使用styleSVG 元素的属性来应用 CSS，使用该元素在文档中对 CSS 进行分组，或者链接到外部样式表。每种方法的优缺点与在 HTML 中使用 CSS 时相同。...SVG 缺乏定位方案 当 CSS 与 HTML 一起使用时，元素框可以： 存在于正常流程中 与float属性一起从正常流程中删除 与position属性一起从正常流程中删除 CSS 规范将这些称为定位方案...SVG 元素是根据它们的源顺序堆叠的。出现在文档后面的那些位于堆栈的顶部。如果要更改 SVG 元素的堆叠顺序，则需要在源中移动它们或使用 JavaScript 在 DOM 树中对它们重新排序。...不幸的是，这是 SVG 的一个限制。要修复它，我们需要更改viewBoxSVG 文档的属性，但仅当视口低于特定大小时。

6.2K00

JavaScript 入门（下）

我们在“HTML入门教程”中的“前端技术简介”中深入浅出地讲解了HTML、CSS和JavaScript之间的关系，这一篇文章分量很重，大家没看过的记得回去看一下。...HTML、CSS和JavaScript的关系如下： “HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。”...x表示窗口水平方向每次扩大或缩小的数值，y表示垂直方向窗口每次扩大或缩小的数值。...顾名思义，其实很好理解，文档对象嘛，操作的都是HTML文档。为了更好理解什么叫“HTML文档”，请看一下CSS入门教程中“正常文档流”这一节。...7、JavaScript操作CSS样式 在JavaScript中，对于元素的CSS操作，我们使用的是DOM对象中的style对象来操作。

1.1K20

sublime text3优秀插件汇总（含安装教程）

---- 优秀插件 emmet：html,css代码补全 html5:html5语法 Alignment：代码对齐 ColorHighlighter:颜色高亮 jQuery：jQuery...• Alt+F3 选中文本按下快捷键，即可一次性选择全部的相同文本进行同时编辑。举个栗子：快速选中并更改所有相同的变量名、函数名等。...• Ctrl+G 打开搜索框，自动带：，输入数字跳转到该行代码。举个栗子：在页面代码比较长的文件中快速定位。 • Ctrl+R 打开搜索框，自动带@，输入关键字，查找文件中的函数名。...举个栗子：在函数较多的页面快速查找某个函数。 • Ctrl+： 打开搜索框，自动带#，输入关键字，查找文件中的变量名、属性名等。 • Ctrl+Shift+P 打开命令框。...显示类 • Ctrl+Tab 按文件浏览过的顺序，切换当前窗口的标签页。 • Ctrl+PageDown 向左切换当前窗口的标签页。

1.7K10

前端面试题归类-css

通过 css3 的box-sizing属性，可以更改元素的盒子模型。...BFC是W3C CSS2.1规范中的一个概念，在CSS3.0规范中已被修改为flow root。...清除浮动的方式？浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。...将CSS代码放在标签内部；内联样式，将CSS样式直接定义在HTML元素内部；移动端的布局用过媒体查询吗？通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。...url属性使用base64的优点：① 减少一个图片的 HTTP 请求使用base64的缺点：① 根据base64的编码原理，编码后的大小会比源文件大小大1/3，如果把大图片编码到html/css中，不仅会造成文件体积增加

1.6K40

html笔记

--body，整个页面的身体部分，主要内容都是在这里添加，body里面不建议添加任何属性（颜色，文本颜色等），建议在css样式里面更改--> 文本格式化标签 </b...，就好比窗口某个小广告无论你怎么 更改页面大小 或者 滚动 他 始终在一个位置 跟着你跑 1），所以test1此时在最顶层 #test1 { z-index: 2; } z-index 值越大 ，则会...；低于1比如0.5，就是缩小 /* 放大两倍 */ transform: scale(2, 2); 写法顺序 如果同时存在多个转换，顺序应该为：移动 - 旋转 - 缩放 顺序的不同会影响最终的结果 如果有多个属性...backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义） both：向前和向后填充模式都被应用

1.8K10
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券