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

前端知识体系（一）语义化标签及布局断点妙用

后面，打算讲在之前沉淀的一些前端知识体系相关的文章陆陆续续整理一下，在html和css中，有一些不是常常被提及，但是又非常有用的一些知识，这里面非常值得一说要数语义化标签和布局断点了。...在HTML5之前，我们通常使用和等标签来构建页面的各个部分，这些标签本身并不包含任何关于它们内容的信息。...宽）的样式 */@media (min-width: 768px) { .container { width: 750px; /* 固定宽度 */ }}/* 大屏幕（大于或等于992px宽）的样式...*/@media (min-width: 992px) { .container { width: 970px; /* 固定宽度 */ }}/* 非常大的屏幕（大于或等于1200px宽）的样式...总结本篇文章实际上理解难度非常低，但是了解了之后，可以起到很大的帮助，至少，你在写页面的时候就懂得使用一些语义化的标签来增强代码的可读性，另外使用布局断点来做响应式，来满足不同尺寸设备的适配需求，个人对于初学

24510

移动端WEB开发之响应式布局

设备的划分情况： 小于768的为超小屏幕（手机） 768~992之间的为小屏设备（平板） 992~1200的中等屏幕（桌面显示器） 大于1200的宽屏设备（大桌面显示器） 1.2...原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。...bootstrap里面父容器版心的尺寸划分 超小屏幕（手机，小于 768px）：设置宽度为 100% 小屏幕（平板，大于等于 768px）：设置宽度为 750px 中等屏幕（桌面显示器，大于等于...超小屏幕（手机）=768px 中等屏幕（桌面显示器）>=992px 宽屏设备（大桌面显示器）>=1200px .container 最大宽度 自动（100%） 750px...3.2 屏幕划分分析 屏幕缩放发现 中屏幕和大屏幕布局是一致的，因此我们列定义为col-md-就行了，md是大于等于970以上的 小屏幕布局发生变化，因此需要为小屏幕根据需求改变样式布局

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

移动端WEB开发之响应式布局

设备的划分情况： 小于768的为超小屏幕（手机） 768~992之间的为小屏设备（平板） 992~1200的中等屏幕（桌面显示器） 大于1200的宽屏设备（大桌面显示器） 1.2...原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。...父容器版心的尺寸划分 超小屏幕（手机，小于 768px）：设置宽度为 100% 小屏幕（平板，大于等于 768px）：设置宽度为 750px 中等屏幕（桌面显示器，大于等于 992px）：...-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!...2.6 bootstrap栅格系统 Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

3.4K31

使用标签承载内容

ordered list） 无序列表（unordered list） 定义列表（definition list） 链接（anchor） 页面链接 锚链接 功能链接 图像（image） 图像存储位置 图像及其宽高...） 如何收集信息 表单控件（input） 文本框 / 密码框 / 文本域 单选按钮 / 复选按钮 / 下拉列表 提交按钮 / 图像按钮 / 文件上传 组合表单元素 fieldset / legend HTML5...的表单控件 日期 电子邮件 / URL 搜索 音视频（audio / video） 视频格式和播放器 视频托管服务 添加视频的准备工作 video标签和属性 audio标签和属性 其他 文档类型 注释...background-repeat / background-position） 布局 控制元素的位置（position / z-index） 普通流 相对定位 绝对定位 固定定位 浮动元素（float / clear） 网站布局 HTML5...布局 适配屏幕尺寸 固定宽度布局 流体布局 布局网格

2.3K20

potplayer快捷键大全「建议收藏」

->自定义尺寸设置… 1 屏幕->半倍屏 Alt+1 屏幕->显示器 30% 尺寸 2 屏幕->1 倍屏 Alt+2 屏幕->显示器 45% 尺寸 3 屏幕->1.5 倍屏 Alt+3 屏幕->显示器...60% 尺寸 4 屏幕->2.0 倍屏 Alt+4 屏幕->显示器 75% 尺寸 5 屏幕->最大化 6 屏幕->最大化 7 屏幕->最大化+(过任务栏) 8 屏幕->无边框尺寸 9 屏幕->自定义尺寸...->窗口定位->位移 ↓ Ctrl+Alt+Numpad 3 屏幕->窗口定位->置于 ↘ Numpad 4 帧位->帧宽 – Ctrl+Numpad 4 帧位->偏移 ← Alt+Numpad 4 字幕...+Numpad 5 屏幕->窗口定位->外框居中 Numpad 6 帧位->帧宽 + Ctrl+Numpad 6 帧位->偏移 → Alt+Numpad 6 字幕->字幕风格->左右边距 + Ctrl+...->窗口定位->置于 ↗ Add 帧位->全帧 + Ctrl+Alt+Add 屏幕->窗口 + Subtract 帧位->全帧 – Ctrl+Alt+Subtract 屏幕->窗口 – F1 关于… Ctrl

6K30

Android开发笔记（八十一）屏幕规格适配

Configuration对象在Activity中通过调用getResources().getConfiguration()得到，该对象的常用属性说明如下： touchscreen : 屏幕触摸方式。...适配竖屏与横屏的另一种方法，是在布局文件中采用ViewStub标签，此时无需新建layout目录，只要在代码中判断屏幕方向，从而选择合适的ViewStub标签加以显示。...；或者如果手机没插sim卡，那也不能打电话）； 3、从系统服务WINDOW_SERVICE中获得窗口管理对象WindowManager，再由该对象获得屏幕的长和宽，据此算出屏幕对角线的长度，若结果大于六英寸...; } return false; } } 适配不同屏幕尺寸 不同设备的屏幕尺寸有大有小，适配不同大小屏幕的方法也有三种： 1、在布局文件中，视图或控件的宽或高使用match_parent...测量尺寸的介绍参见《Android开发笔记（十二）测量尺寸与下拉刷新》。 2、在代码中获得当前屏幕的分辨率，根据不同分辨率做不同处理。

1.4K30

联系我们吧 - 12个联系我们表单和页面设计赏析和学习

该联系表单包含有Google地图背景，可以准确地展示你公司在地图上的位置。...Bootstrap 3 contact form 特色： HTML代码 视频演示 定制/使用指南 CSS样式 jQuery表单提交 表格验证 服务器端处理 图像背景 Bootstrap 3联系表单是一个完全响应的网站联系页面...HTML5联系表格 设计： CSS3和HTML5 自定义设计 全宽联系表格 明亮的配色方案 HTML5联系表单简单而美观，具有很棒的交互动态功能。此表单使用CSS3和HTML5创建。...可以轻松自定义设计以及在任何屏幕上自适应。你只需复制并粘贴HTML和CSS代码即可将该模板添加到你的网站中。该HTML5表单包含所有必填字段，例如姓名，电子邮件，电话和消息等。...该模板就是在这种设计趋势下专门制作的，具有非常细致美观的自适应力，任何屏幕的尺寸都可以完美展示。该模板有一个简化导航设计，大型CTA按钮通过拇指可以轻松点击，大型表单字段可以用于收集用户反馈。 ?

6.1K30

【HTML5】HTML5 多媒体标签 ② ( 视频标签 ＜video＞ | 视频标签常见属性 | autoplay 属性 | controls 属性 | poster 属性 | 设置多个格式视频 )

视频标签 中 放 ogg 和 mp4 两种格式的视频 , 所有的浏览器都可以播放视频 ; 如果浏览器的版本太老 , 什么格式都不支持 ; 视频标签 video 语法格式 : <video..., 一般情况下 , 不显示控制按钮 ; autoplay 属性 : 值为 autoplay , 在 Chrome 浏览器中 禁用自动播放 , 其它浏览器不禁用自动播放 ; 如果为视频设置静音播放..., 则可以在 Chrom 浏览器中 设置 autoplay 实现自动播放 ; muted 属性 : 值为 muted , 将视频设置为静音播放 ; 如果为视频设置静音播放 , 则可以在 Chrom...浏览器中 设置 autoplay 实现自动播放 ; width 属性 : 值为像素值 , 设置播放器宽度 ; 播放器的宽高建议只设置一个 , 避免失真 ; height 属性 : 值为像素值 , 设置播放器高度...="controls"> 执行结果 : 默认状态 : 播放视频后效果 : 2、修改视频尺寸 通过修改 video 标签的宽度 , 修改视频尺寸

2.4K20

必应首页平铺背景图片的实现方案

基本算法 demo的结构非常简单，如下： bgDiv是背景区域节点，bgBox的作用是在某些屏幕尺寸下令背景图片居中显示...1920×1080,css中一些宽高尺寸以及宽高限制在下一节中讲解。...当然有工具可以实现，本例中用的是现成的数据; 获取浏览器可视区域的尺寸，并计算宽高比; 如果屏幕宽高比大于图片宽高比，将图片宽度撑满浏览器视窗，此时屏幕高度不足，图片向上偏移; 如果屏幕宽高比小于图片宽高比...响应式 我们注意到上文提到的css中有一些宽高尺寸的限制，这些数值有一部分是为了满足必应首页具体需求的，有一部分是自适应屏幕尺寸的。...媒体查询超出边界值的屏幕下，背景图片的宽高限制在图片的原始尺寸，这是为了不拉伸图片造成失真，超过1920×1080的屏幕始终居中显示原始图片尺寸。

1.8K50

WebApp开发-Google官方教程

大家好，又见面了，我是你们的朋友全栈君。...也就是说，一个web页面在扩张到整个屏幕之前占用的像素数据是由viewport的尺寸（dimensions）来定义的，而不是设备屏幕的尺寸。...你可以在 tag的content 属性中，定义多个viewport性质。例如，你可以定义viewport的高和宽，页面的最初大小，以及目标屏幕分辨率。...一个web页面，其中有320像素宽的图像，在Android Browser中呈现，没有设置viewport元数据（开启了”overview mode”，viewport默认为800像素宽） Viewport...因此，如果你的web页面定义的宽度为320像素的话，那么你的页面看起来就比屏幕小（除非你的物理屏幕是320像素宽的，因为viewport模拟出了一个800像素宽的可绘图区域），就如figure 1中所示

95020

全民K歌折叠屏适配探索

在详情页（容器宽度固定、高度可变）情况下，折叠时：容器高宽与视频等比占满屏幕宽度，高度自适应；展开时：视频尽可能放大，但满足高度在等比情况下不会溢出最大可视范围。...其主要在一些作品的展示上有问题，这是因为K歌在代码中针对当前的屏幕高宽在初始化逻辑中做了一些固化的高宽设置。...该问题主要体现在业务场景中需要根据屏幕高宽进行固化样式的逻辑，这样的情况在其他的App来说也是经常存在的，故单独拎出来统一说明，在本节中主要涵盖了全民K歌的解决方案。...全民K歌涉及到模版、视频的播放，有较多的业务场景中需要根据屏幕高宽进行固化高宽的逻辑。 基本原则 这也是导致界面显示异常问题的地方，拿详情页来说： ?...显示原则 且，运算后的视频比例不会变形，其与布局在帧布局中显示后等效为2种显示效果： ? 剩下的则是对运算模型进行细化拆分，以便能做到在各项尺寸均能有一个较为舒适的体验。 ?

2.4K30

【Android RTMP】Android Camera 视频数据采集预览 ( 视频采集相关概念 | 摄像头预览参数设置 | 摄像头预览数据回调接口 )

图像采集显示组件 : 布局文件中添加 SurfaceView , 用于在该 SurfaceView 组件中预览 Camera 采集的图像数据 ; 2 ...., 数据量随之变大 ; ③ 码率极限值 : 码率不是越大越好 , 码率有一个极限值 , 固定的宽高的视频码率有一个最大值 , 高于该最大值 , 没有任何意义 , 不能提升视频质量 ; ④ 帧率 : FPS...Camera 预览尺寸 : 但是实际上 , Android 系统中的 Camera 摄像头的尺寸参数必须从几个预置的预览尺寸中选择 , 这些预览尺寸是厂家设定好的 , 用户无法设置 Camera 的语言尺寸...预览尺寸选择方法 : ① 用户设置像素总数 : 用户设置的宽高像素值相乘, 就是用户设置像素总数 ; ② 系统支持像素总数 : 屏幕支持的 宽 高 像素值相乘, 就是系统支持的某个宽高的像素总数 ; ③...* 用户设置像素总数 : 用户设置的 宽 高 像素值相乘, 就是用户设置像素总数 * 系统支持像素总数 : 屏幕支持的 宽 高 像素值相乘, 就是系统支持的某个宽高的像素总数 *

1.2K10

电脑显示器尺寸对照表_显示器选购攻略

1、屏幕比例和分辨率 首先来说说屏幕尺寸和分辨率，目前市场上主流的显示器尺寸从19寸到43寸不等，屏幕比例可以划分为宽屏(16:9)、黄金屏(16:10、3:2)、传统屏(4:3、5:4)、带鱼屏(21...，由于同尺寸下，16:9宽屏相比4:3等传统屏幕面积更小，达到同一亮度所需的背光模组也更少，对于显示器厂商来说能省下不少钱，因此主流的屏幕比例从8年前开始慢慢演变为了16:9。...近期有些厂商宣称的动态对比度，在实际使用中的效果也不是很明显。...6、尺寸 　　目前显示器的尺寸实际上就是其显示部分的对角线长度，单位是英寸(1英寸=2.54cm)。在长宽比一致的情况下，实际面积与对角线长度呈平方比关系。...对于长宽比不同的显示器，例如16:9和超宽的21:9显示器，尺寸对比并不能直接反应两者屏幕面积大小，只需要知道同一“尺寸”下，屏幕越接近正方形，实际显示面积越大即可。

7K10

移动开发-响应式

移动开发-响应式布局 响应式开发原理: 使用媒体查询针对不同宽度的设备进行布局和样式设置，从而适配不同设备 设备划分 尺寸区间 超小屏幕 (手机) < 768px 小屏设备 (平板) >= 768px...~ < 992px 中等屏幕 (桌面显示器) >= 992px ~ <1200px 宽屏设备 (大桌面显示器) >= 1200px 响应式布局容器: 响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果...原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化 也可以根据实际情况自己定义划分 Bootstrap 简介...--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题--> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js...(viewport) <em>尺寸</em>的增加，系统会自动分为最多12列 栅格选项参数: 超小<em>屏幕</em> (手机) =768px 中等<em>屏幕</em> (桌面显示器) >=992px <em>宽</em>屏设备

2.4K20

微信小程序的组件用法与传统HTML5标签的区别

传统HTML5在加载的时候受限于网络环境，需要顺序加载HTML、CSS、JS，然后返回数据，最后渲染页面显示在浏览器中。用户经常需要等待很长时间，体验会受到影响。...文件引入在小程序做模块化拆分的过程中非常重要。 WXSS 4、尺寸单位 WXSS支持的单位有px、rem和rpx，其中rem和rpx可以针对屏幕容器进行适配，px则为固定尺寸。...所以工程师拿到750的设计稿，在PS中量取的容器大小，可以直接定义为rpx，不需要进行2倍尺寸的换算。...7、image 小程序的image与HTML5的img最大的区别在于：小程序的image是按照background-image来实现的。 默认image的高宽是320*240。...不过这里返回的高宽是px单位，不支持屏幕自适应; 图片包括三种缩放模式scaleToFill、aspectFit、aspectFill和9种裁剪模式，三种缩放模式的实现原理对应如下： scaleToFill

2.2K21
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

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

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

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

    领券