表单元素 viewport视口设置 媒体查询

最新推荐文章于 2021-12-08 22:51:56 发布
最新推荐文章于 2021-12-08 22:51:56 发布
阅读量191 收藏
点赞数
分类专栏： 博客
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TomQue/article/details/100673239
版权

表单元素

***input 输入框 行内块元素
type 输入框的类型 text 表示是一个文本输入框
placeholder 占位字符 用于提示输入框应该输入的内容
value 表示输入框中内容
name 输入框的名字

type = password 密码输入框 输入的内容以…形式
type = email 邮箱输入框
type = file 文件选择器
type 数字输入框

viewport 视口设置

对于移动端网页 有两种实现方式
1.网站PC端页面和移动端页面完全分开做, 根据用户访问的设备类型,给用户反回不同的页面
2.响应式页面布局 页面自身可以根据浏览器窗口的宽度进行不同的布局,在屏幕宽度到达一个临界点时,切换为另一种布局样式

媒体查询

设置一些样式仅在某些条件下生效

TomQue
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自适应布局和响应式布局以及媒体查询
weixin_52954097的博客
11-09 1378
前端页面布局：自适应布局，响应式布局和媒体查询 含JS代码
CSS 视口 - viewport
Discowei的博客
07-10 1228
CSS 视口 - viewport 什么是视口 视口-viewport 就是浏览器显示页面内容的屏幕区域。 视口分类： 布局视口 - 弃用 (deprecate) 视觉视口 - 弃用 (deprecate) 理想视口 - 开发主流 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。 iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通
33.1.响应式布局——H5C3
✈ 正在努力 の 寒江（StudiousTiger) ✌ 呐 ✈
08-12 182
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 使用
[移动端]视口与媒体查询
程序员云锦的博客
12-08 2580
文章目录视口布局视口视觉视口理想视口视口适配 Meta viewport获取窗口大小API媒体查询 @media媒体类型媒体功能 视口 viewport 解释为中文就是‘视口’的意思，也就是浏览器中用于显示网页的区域。在 PC 端，其大小也就是浏览器可视区域的大小，所以我们也不会太关注此概念；而在移动端，绝大多数情况下 viewport 都大于浏览器可视区，保证 PC 页面在移动浏览器上面的可视性。为提升可视性体验，针对移动端有了对 viewport 的深入研究。 在移动端有三种类型的viewport：
快速入门和使用CSS媒体查询
weixin_47024018的博客
04-29 445
媒体查询 媒体查询可以根据用户设备的尺寸不同而调用不同的样式。它是一种向不同设备提供不同内容的简单而有效的方式，最常用的查询是处理视口高度和宽度的查询。 首先了解一下行内设置 在我们style标签中的media可以设置两个属性，一个是screen[屏幕]、另一个是print[打印机]，通过这样的设置针对不同的东西完成对应的css样式设置。 <style media="screen"> h1 { color: green; } &l
响应式手机网站——视口约束&媒体查询
小头Sophia
03-21 2885
1.http://mediaqueri.es/   响应式网站 2.用谷歌浏览器模仿各种移动设备。 3.设备检测：   1）device.js库                                        （图片截自传智视频） 2）页面跳转：window.location=URL; 4.检测屏幕 更改页面的CSS样式：（有点像hao360换肤
【响应式web设计(二)】视口(viewport)
Linda的前端开发路
05-08 1552
响应式设计的基础问题：视口(布局viewport和视口viewport)
媒体查询简单应用[例]
04-17
在Web开发中，媒体查询（Media Queries）是响应式网页设计的关键技术，它允许我们根据设备的特定特性，如视口宽度、设备像素比等，来应用不同的CSS样式。本篇将通过一个简单的例子，探讨如何使用媒体查询实现对不同...
vue项目里面引用svg文件并给svg里面的元素赋值
10-14
注意，`setAttribute`方法用于设置SVG元素的属性值，而`innerHTML`用于设置文本内容。 **关于SVG的viewBox属性** `viewBox`是SVG的一个重要属性，它定义了一个SVG图形的视口（viewPort），即SVG在画布上显示的区域...
Bootstrap表单控件使用方法详解
11-28
例如，`<meta http-equiv="X-UA-Compatible" content="IE=edge">`告诉IE浏览器使用最新内核，`<meta name="viewport" content="width=device-width, initial-scale=1">`则设置页面视口适应手机屏幕。 Bootstrap表单...
HTML5移动端开发中的Viewport标签及相关CSS用法解析
11-21
移动前端中常说的 viewport （视口）就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip （ device-independent pixel 设备逻辑像素 ）和 CSS 像素之间的关系。这里首先了解以下几个概念。 layout viewport（布局视口） 一般移动设备的浏览器都默认设置了一个viewport 元标签，定义一个虚拟的layout viewport（布局视口），用于解决早期的页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px，所以pc上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。 vis
verge, 在视口中，获取viewport尺寸，检测元素.zip
09-18
verge, 在视口中，获取viewport尺寸，检测元素 compact 是一组用本机JavaScript编写的跨浏览器 视口实用程序。 它包括检测元素是否位于当前视口中的能力。 它作为独立模块。ender模块或者作为 jQuery插件插件运行。 ( npm: ) API.viewpor
媒体网站
02-11
3. **响应式设计**：媒体网站需要适应各种屏幕尺寸，因此HTML5的`<meta>`视口标签（`<meta name="viewport" content="width=device-width, initial-scale=1">`）和CSS3媒体查询是必不可少的，它们确保网站在手机、...
form-responsive:响应式登录和表单页面
03-10
为了实现响应性，我们可以使用`<meta>`标签来设置视口宽度，确保在移动设备上正确显示页面，例如： ```html <meta name="viewport" content="width=device-width, initial-scale=1"> ``` 接着，CSS（层叠样式表）...
视口、媒体查询
qq_50991473的博客
12-27 386
视口 1、视口就是设备的屏幕能用来显示用户网页的那一块区域。 2、浏览器默认视口宽度 iphone:980 ipad:980 Android Samsung:980 Android HTC:980 IE:1024 BlackBerry:1024 3、meta标签设置视口 <meta name="viewport" content="width=device-width,initial-scale=1.0， maximum-scale=1.0， user-scalable=0"/> 4、met
流式布局/媒体查询/视口/移动端布局视口字体设置
weixin_42666092的博客
03-12 365
1.流式布局 1.大部分元素都是基于父级的百分比设置 2.通常使用max-width,max-height,min-height,min-width 3.如果需要高度设置百分比，那么父级的高度必须明确 4.特殊情况的百分比 margin/padding等，他们的百分比是基于 父级的宽度 line-height的百分比是基于自身字体大小的百分比; 2.@media媒体查询 screen 电脑屏幕，手机屏幕，iPad等的一种 print 打印机 speech 用于屏幕阅读器等的发音设备 用是用来设置宽度不同的
（17）2020-12-23（三栏布局、视口、百分比布局、媒体查询）
weixin_53125613的博客
12-23 281
三栏布局、视口、百分比布局、媒体查询一、三栏布局三栏布局的实现方式1、圣杯布局2、双飞翼布局3、利用弹性盒子实现三栏二、视口三、流式布局 / 百分比布局四、媒体查询1、 **媒体查询 实现方式：**2、 逻辑关键字（1）逻辑或（and）（2）逻辑与（，）（3）逻辑非（not）3、 设备方向4、 常见的查询特性5、 示例： 一、三栏布局 三栏布局的实现方式 1、圣杯布局 总结： 1.在主体内部外面嵌套了一个div 2.center在结构上靠前（写在left、right前） 3.center，left，
媒体查询：支持不同的视口
coffee
03-30 1131
没有CSS3的媒体查询模块，就不能针对设备特性（如视口宽度）设置特定CSS样式。 媒体查询基本语法 将下面这段代码插入到页面后，调整浏览器大小看效果！ body{ background-color:grey; } @media screen and (max-width:960px){ body{ background-color:red; } } @media screen and
移动端布局三种视口_视口（viewport）
weixin_36181282的博客
12-29 1173
讲述meta视口标签和媒体查询相关的内容。示例代码：~~~@media screen and (max-width:480px) {// some style}~~~## 像素(pixel)* 设备像素：设备屏幕的物理像素。* CSS像素：为Web开发者创造的，在CSS和JS中使用的一个抽象层。CSS像素和设备像素的比例取决于屏幕是否高DPI和用户缩放的比例。## 三个视口桌面上视口宽度等...
PHP成绩查询系统源代码
- `<meta name="viewport">`：定义了移动端设备的视口设置，以适应不同屏幕大小。 - `<title>`标签内动态插入标题，增强了用户体验。 - 链接了CSS样式表`style.css`，用于控制页面样式。 3. **成绩查询表单**： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值