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

已于 2022-04-10 06:25:14 修改
阅读量119 收藏
点赞数
文章标签： 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移动端视口总结
05-09
综上所述，HTML和CSS在移动端开发中需要处理的关键点包括理解不同设备的特性，掌握设备像素比的概念，以及通过适当配置视口来优化用户体验。通过这些技术，开发者能够创建适应各种屏幕尺寸和分辨率的响应式网页。
CSS——利用HTML+CSS书写移动端页面的相关知识点
Bonsoir777的博客
08-03 1196
本文主要介绍的是使用HTML+CSS书写移动端页面的相关知识点。
移动端的html+css
ZOEylchen的博客
12-07 784
每次都要上网找寻资料。 花点时间来写这篇博客。 首先在学习制作之前，应该有对基础html和css有了了解。 之前你可以看html4.0 这个以html5为例 开头是不再是你所见到的冗长的打头。 然后便是 <html> <head> <meta charset="utf-8"> <meta name ="viewport" content
HTML+CSS（PC端+移动端）
qq_57003087的博客
06-01 4441
HTML+CSS基础（PC端+移动端）
HTML5移动端通用css
高振的博客
12-04 1650
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
前端PC-移动端CSS公共样式+HTML
GUK
05-08 2869
一：移动端公共样式 [css] view plain copy /* 禁用iPhone中Safari的字号自动调整 */   html {       -webkit-text-size-adjust: 100%;       -ms-text-size-adjust: 100%;       /* 解决IOS默认滑动很卡的情况 */       -webkit-overflow-s...
HTML5+CSS3基础篇(移动端&响应式).rar_HTML5移动端_css_html5_html5 移动_移动端
09-21
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富且具有高度交互性的移动端网站提供了强大的支持。在移动端开发中，HTML5引入了一系列新的元素和API，旨在优化移动设备上的用户体验，而CSS3则带来了更...
Web-前端html+css从入门到精通 198. 移动端之viewport视口.zip
05-23
在Web前端开发中，HTML和CSS是构建网页的基石，而移动端开发的复杂性在于适应不同尺寸和分辨率的设备。"移动端之viewport视口"是一个关键的概念，它直接影响着移动设备上的网页展示效果。本节内容将深入探讨这个概念...
html携程网首页，移动端css
07-03
其次，HTML5的`<meta>`标签中的`viewport`属性允许开发者精确控制移动设备上的网页视口大小，确保携程网首页在不同屏幕尺寸的设备上都能呈现出良好的布局和可读性。例如，设置`width=device-width`可以使网页宽度与...
html+css自制移动端
08-10
本教程以“html+css自制移动端”为主题，旨在介绍如何使用HTML和CSS来创建适应移动端的网页。 HTML（HyperText Markup Language）是网页内容的基础结构语言，用于定义网页的各个元素，如标题、段落、图片、链接等。...
【前端库】HTML 移动端适配（推荐）
老程
02-07 1万+
案例单击我 上一篇文章我写了，关于移动端适配问题，传送门开，这一次也关于移动端适配问题，这个方式比较常用。我经常在公司得项目中使用 直接粘贴适配代码： /* * @Author: a * @Date: 2017-03-11 15:08:34 * @Last Modified by: a * @Last Modified time: 2017-03-11 15:08...
HTML+CSS+移动端前端
weixin_51877011的博客
08-06 7917
前端小白学习笔记
移动端左右滑动问题-纯html与css
Haines
03-26 1万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;纯css实现左右滑动&lt;/title&gt; &lt;style type="text/css"&gt; ul,li{ list-style: none;; } .slide-box
html与CSS的移动端布局基础知识
weixin_46466212的博客
05-25 305
html与CSS的移动端布局学习 meta视口标签的标准写法 <meta name="viewport" content="width=device-width,initial-scale=1.0.maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" 物理像素与开发像素 pc端上的1px=1个物理像素 移动端上根据手机型号不同，1px=2/3/4个物理像素 此时便要使用到二倍图四倍图，否则图片放在移动端会模糊 background-s
HTML和CSS之移动端
weixin_47481936的博客
03-31 334
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手机端自适应网页
热门推荐
Fredrik的博客
08-10 5万+
一，最近在做项目，写移动端的网页，主要是自适应的问题。bootstrap等前端框架用的不好，又不想耽误时间，不能自适应很烦人，这里给大家介绍下我的方法， 也是结合了很多人的思路。 1.在头部加入这样的一行代码： &lt;meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0...
html+css移动端布局
li520_fei的博客
03-21 6200
文章目录移动端一、移动端基础**1 .浏览器现状****2 .手机屏幕现状****3.常见移动端屏幕尺寸****4.移动端调试方法**5.总结二、视口**1.布局视口** `layout viewport`**2.视觉视口**`visual viewport`**3.理想视口** `ideal viewport`4.meta视口标签三、二倍图**1.物理像素&物理像素比**2.**多倍图**3.**背景缩放 background-size****4.多倍图切图 cutterman**四、移动端开发选
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 2698
title>充电效果
移动端CSS的学习笔记。
01-19
在学习移动端CSS的过程中，有一些基础知识和技巧是需要掌握的，比如移动端浏览器的调试、viewport设置、背景缩放、多倍图切图、移动端主流方案和特殊样式等。 移动端CSS的学习内容主要包括以下几个方面： 1. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值