移动端HTML CSS基础 (移动端基础+視口)

已于 2022-04-10 06:25:14 修改
阅读量116 收藏
点赞数
文章标签： html css
于 2022-04-10 05:52:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59177589/article/details/124071935
版权

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6ZSZ6K-v55qE56m66Ze0,size_20,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6ZSZ6K-v55qE56m66Ze0,size_20,color_FFFFFF,t_70,g_se,x_16 

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6ZSZ6K-v55qE56m66Ze0,size_20,color_FFFFFF,t_70,g_se,x_16 

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6ZSZ6K-v55qE56m66Ze0,size_20,color_FFFFFF,t_70,g_se,x_16 视 口watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6ZSZ6K-v55qE56m66Ze0,size_20,color_FFFFFF,t_70,g_se,x_16

 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6ZSZ6K-v55qE56m66Ze0,size_20,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6ZSZ6K-v55qE56m66Ze0,size_20,color_FFFFFF,t_70,g_se,x_16 

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6ZSZ6K-v55qE56m66Ze0,size_20,color_FFFFFF,t_70,g_se,x_16 

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6ZSZ6K-v55qE56m66Ze0,size_20,color_FFFFFF,t_70,g_se,x_16 

 

写法:

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6ZSZ6K-v55qE56m66Ze0,size_20,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6ZSZ6K-v55qE56m66Ze0,size_20,color_FFFFFF,t_70,g_se,x_16 

 

如果不加此視口标签 会自动默认980px 会看不清里面的内容

如果注释掉

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6ZSZ6K-v55qE56m66Ze0,size_20,color_FFFFFF,t_70,g_se,x_16

 效果:

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6ZSZ6K-v55qE56m66Ze0,size_11,color_FFFFFF,t_70,g_se,x_16

 如果加上

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6ZSZ6K-v55qE56m66Ze0,size_20,color_FFFFFF,t_70,g_se,x_16

 

效果:

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6ZSZ6K-v55qE56m66Ze0,size_10,color_FFFFFF,t_70,g_se,x_16

 

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6ZSZ6K-v55qE56m66Ze0,size_16,color_FFFFFF,t_70,g_se,x_16 

 

 

错误的空间
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML和CSS之移动端
weixin_47481936的博客
03-31 326
meta视口标签 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,user-scalable=no" /> <title></title> &lt
HTML与css基础.emmx
06-16
HTMl与css基础思维导图,包括简单的标签,css属性内容,BFC规范,postcss与css架构,响应式布局：移动端适配方案,viewport视口grid网格布局等等
Web-前端html+css从入门到精通 198. 移动端之viewport视口.zip
05-23
Web-前端html+css从入门到精通 198. 移动端之viewport视口.zip
HTML5移动端开发中的Viewport标签及相关CSS用法解析
11-21
移动前端中常说的 viewport （视口）就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip （ device-independent pixel 设备逻辑像素 ）和 CSS 像素之间的关系。这里首先了解以下几个概念。 layout viewport（布局视口） 一般移动设备的浏览器都默认设置了一个viewport 元标签，定义一个虚拟的layout viewport（布局视口），用于解决早期的页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px，所以pc上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。 vis
html+css移动端视口总结
05-09
1.什么是移动端 a)可以方便移动的设备都统称之为移动端，比如：手机、平板、手表等 2.开发一个移动端的页面最终是要呈现在手机上的，但是我们的开发人员在平时的开发过程中是要经常去做一些调试的，这个时候我们就可以利用浏览器给我们提供的手机模拟器开查看在手机上的效果。 右键----检查----找到设备模拟器切换窗口 3.设备模拟器里面内容介绍 a)iphone678======手机型号 b)375*667========手机屏幕的分辨率 c)75%============观看比例 d)旋转小图标======切换横屏和竖屏 e)右上角三个圆点=== i.capture screenshot 截取手机屏幕得相关设计稿（短图） ii.capture full size screenshot 截取手机屏幕相关设计稿(带有滚动条区域得所有) 4.常见设备的大小、屏幕的大小 a)iphone4========320*480 b)iphone5========320*568 c)iphone678======375*667 d)iphone678s=====414*736 5.获取设计稿得大小 a)
HTML+CSS+移动端前端
weixin_51877011的博客
08-06 7551
前端小白学习笔记
移动端的html+css
ZOEylchen的博客
12-07 779
每次都要上网找寻资料。 花点时间来写这篇博客。 首先在学习制作之前，应该有对基础html和css有了了解。 之前你可以看html4.0 这个以html5为例 开头是不再是你所见到的冗长的打头。 然后便是 <html> <head> <meta charset="utf-8"> <meta name ="viewport" content
移动端布局基础（html+css+js）
qq_64970126的博客
04-02 2455
1、视口:布局视口、视局视口、理想视口 2、二倍图：物理像素和像素比、背景图片的二倍图、image图片的二倍图 3、移动端常见样式修改方法：-webkit-box-sizing（盒子实际大小）、-webkit-tap-highlight-color（超链接高亮样式修改法）、-webkit-apperance(按钮和文本框自定义样式)、-webkit-touch-callout(长按状态下禁止弹出菜单栏)
移动端视口配置
weixin_42666092的博客
07-07 487
<meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no"> css: html,body{ font-size:10px} 其他内容 aa/10 rem
(html+css)_移动端适配方案一（流式布局）
qq_41940987的博客
11-04 876
一、前言 小案例地址：https://github.com/xiexumei/web-demo 二、主要内容 1、移动端面对的问题：因为手机屏幕和尺寸不一样，当我们用不同手机设备浏览的...
html移动端布局,css 移动端布局(一)
weixin_30036893的博客
06-22 612
布局方式总结:float(浮动) 、 position(定位i) 、table-cell(转表格)、flex(弹性盒)、你的html跟文档字体设置为 10px; html {font-size: 62.5%;} ==> 62.5%*16 = 10 (1rem = 10px)设计稿的宽度，高度，边框，一切大小都除以20,在进行设置rem (以iphone6为基准) 设计稿的宽度为...
HTML5移动端通用css
高振的博客
12-04 1639
HTML5移动端通用css 下面是common.css内容 /*css初始化*/ /*清除内外边距*/ body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,img{ margin: 0; padding: 0; borde
html+css手机端自适应网页
热门推荐
Fredrik的博客
08-10 5万+
一，最近在做项目，写移动端的网页，主要是自适应的问题。bootstrap等前端框架用的不好，又不想耽误时间，不能自适应很烦人，这里给大家介绍下我的方法， 也是结合了很多人的思路。 1.在头部加入这样的一行代码： &lt;meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0...
html 添加元素如何能提升速度
大黄鸭在发光的专栏
06-01 225
综上所述，通过使用文档片段、innerHTML、虚拟滚动以及避免频繁的重排和重绘，你可以提高在 HTML 中添加元素的速度和性能。在 HTML 中，如果你需要频繁地添加大量元素，需要确保你的操作能够以最佳性能进行。：如果你需要展示大量数据，可以考虑使用虚拟滚动来仅渲染可见区域内的元素，而不是一次性渲染所有元素。这可以节省大量时间和内存。：当添加元素时，尽量避免频繁的 DOM 操作，因为每次修改都可能会触发浏览器的重排和重绘，影响性能。
【HTML】tabindex
纠缠AI的亮子
06-01 64
索引值不应当大于0，见。
面试题：你怎么理解 HTML 语义化？语义化有什么优点？
Hlleo Wrold
05-31 758
（语义化是什么）HTML 语义化要求开发者，而不是像divspan等无意义的标签，这里的意义就是语义。（语义化的作用）通过使用语义化标签，开发者。（语义化举例）如header常用于定义nav常用于定义article常用于定义一篇section常用于定义aside常用于定义footer常用于定义main常用于定义等等。
在HTML中写入JavaScript
最新发布
jgxmw01的博客
06-01 278
通过这两种方法，你可以轻松地在网站中添加JavaScript代码，从而为你的网站添加各种交互功能。直接在HTML中编写JavaScript适用于代码量较少的情况，而引入外部文件则适用于更大型的项目。这可以通过直接在HTML文件中写入JavaScript代码，或者通过引入外部JavaScript文件来实现。然后，你可以在这个文件中编写你的JavaScript代码。当你的JavaScript代码量较大时，将代码保存在外部文件中更为清晰和高效。在上面的示例中，src属性指定了外部JavaScript文件的路径。
HTML (总结黑马的)
SKL4399的博客
06-01 123
img src="./cat.jpg" alt="替换文本" title="提示文本"> 替换文本是图片没有显示的时候显示对应的文字；定义列表： 标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情 类似于苹果官网最下面的那个效果。 女。
用html+css+js写一个移动端登录页面
09-12
### 回答1： 好的，我会尽力帮你。 HTML (Hypertext Markup Language) 是用来描述网页的一种语言。HTML 不是一种编程语言，而是一种标记语言 (markup language)。标记语言是一套标记标签 (markup tag)，用来描述文档中的内容。 CSS (Cascading Style Sheets) 是一种样式表语言，用来描述 HTML 或 XML (包括如 SVG、HTML 之类的 XML 文档) 文档的呈现方式。 JavaScript 是一种轻量级的编程语言。它是设计用来给 HTML 网页增加交互性的。 要写一个移动端登录页面，你可以使用 HTML、CSS 和 JavaScript 来创建一个响应式的登录表单，并让它适应不同大小的屏幕。 以下是一个简单的登录页面的示例： HTML 代码: ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录页面</title> </head> <body> <form id="login-form"> <label for="username">用户名:</label><br> <input type="text" id="username" name="username"><br> <label for="password">密码:</label><br> <input type="password" id="password" name="password"><br><br> <input type="submit" value="登录"> </form> </body> </html> ``` CSS 代码: ``` #login-form { width: 300px; margin: 0 auto; text-align: center; } #login-form label { display: block; margin-bottom: 8px; font-size: 18px; } #login-form input[type="text"], #login-form input[type="password"] { width: 80%; height: 32px; padding: 8px; border: 1px solid #ccc; ### 回答2： 要用HTML、CSS和JS编写一个移动端登录页面，首先，我们需要创建一个HTML文件，然后在文件中添加必要的HTML结构和内容。 在HTML文件中，我们可以使用<meta>元素设置视口尺寸，以确保页面适应移动设备的屏幕。然后，我们可以创建一个表单元素，用于用户输入用户名和密码。这可以通过<input>元素实现，设置不同的类型和属性来指定用户名和密码输入框。我们还可以添加一个提交按钮，供用户点击以提交登录表单。 接下来，我们可以使用CSS来为登录页面添加样式。我们可以使用选择器来选择特定的元素，然后使用CSS属性来定义它们的样式。例如，我们可以设置表单的边框、背景颜色和字体样式等。我们还可以使用媒体查询来调整页面布局和样式，以适应不同大小的移动设备。 最后，我们可以使用JavaScript来为登录页面添加交互功能。例如，我们可以使用JavaScript来验证用户输入的用户名和密码是否符合要求，或者在用户点击提交按钮时执行某些操作。我们可以使用事件监听器来侦听按钮点击事件，并在事件发生时触发相应的功能。 通过结合HTML、CSS和JS，我们可以创建一个移动端登录页面，并为其添加样式和交互功能，使其适应不同的移动设备。这样用户就可以在移动设备上方便地登录并使用网站或应用程序。 ### 回答3： 移动端登录页面可以使用HTML、CSS和JavaScript来实现。 首先，在HTML中创建一个登录页面的结构，可以使用`<form>`标签来包裹登录表单，包含用户名和密码的输入框以及提交按钮。可以使用`<input type="text">`来创建文本输入框和`<input type="password">`来创建密码输入框。 接下来，使用CSS样式给登录页面添加样式，使其适应移动设备。可以使用媒体查询来设置页面在不同屏幕尺寸下的样式。可以设置背景颜色、字体样式、边框等等，以及通过`@media`查询来调整页面布局。 然后，使用JavaScript来处理表单提交的事件。当用户点击提交按钮时，可以使用`addEventListener`方法监听提交事件，在事件处理函数中获取输入框中的用户名和密码，并进行验证。可以使用正则表达式或者其他方法来验证输入的合法性。如果验证通过，则可以跳转至用户的登录页面，或者显示登录成功的提示信息。 此外，可以使用JavaScript根据设备的屏幕尺寸动态调整页面布局和样式，以实现响应式设计。可以使用`window.onload`函数或者其他方法来检测屏幕尺寸，并进行相应的调整。 最后，可以在HTML中引入所需的CSS和JavaScript文件，以便页面正确显示和交互。 总的来说，使用HTML、CSS和JavaScript可以很方便地创建一个移动端登录页面。需要注意页面布局和样式的适应性以及输入验证的安全性。感谢您的提问，希望这个回答对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值