PC端写移动端（完美视口）

最新推荐文章于 2023-07-14 19:57:35 发布
原创 最新推荐文章于 2023-07-14 19:57:35 发布 · 211 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨了HTML中`<meta name=viewport`标签的作用，它如何帮助调整网页在不同设备上的显示，以及初始缩放设置`initial-scale=1.0`的影响。通过理解这一关键的响应式设计元素，开发者可以更好地创建适应手机和平板等设备的网页体验。

            <meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS — 像素、视口、移动端、响应式布局
m0_59897687的博客
01-19 732
目录 一、像素 二、视口（viewport） 三、移动端 四、响应式布局&媒体查询 一、像素 屏幕是由一个一个发光的小点构成的，这一个一个的小点就是像素 分辨率：1920*1080 说的就是屏幕中小点的数量 在前端开发中像素要分成两种情况讨论：CSS像素和物理像素 物理像素：上述所说的小点点就属于物理像素 CSS像素：编写网页时，我们所用的像素都是CSS像素 浏览器在显示网页时，需要...
前端工程师实战20完结：详解手机和PC的像素差异、完美视口、响应式布局与媒体查询
qq_26226059的博客
05-05 838
大家好，全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中！按知识点循序渐进，按照顺序读下来绝对比搜索网上教程更加紧凑！内容通俗易懂，图文并茂，欢迎订阅！ 像素 - 屏幕是由一个一个发光的小点构成，这一个个的小点就是像素 - 分辨率：1920 x 1080 说的就是屏幕中小点的数量 -在前端开发中像素要分成两种情况讨论：CSS像素 和 物理像素 - 物理像素，上述所说的小点点就属于物理像素 - CSS像素，编写网页时，我们所用像素都是CSS像素 - 浏览器..
关于移动端布局和pc端写法
唐唐唐行的博客
05-30 284
原文：关于移动端布局和pc端写法_xuguibin8的博客-优快云博客_移动端写法 一：移动端准备工作 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"> <!-- 设置在苹果手机上
十五、移动端（二） -- 完美视口
weixin_45602227的博客
05-31 1202
一、像素、视口与像素比 1.1 像素 1) 屏幕是由一个一个发光的小点构成的，这个小点就是像素 2) 分辨率：1920*1080 ，这实质上就是说的小点的数量。 3) 在前端开发中，像素分为两种:即物理像素和CSS像素。 a) 物理像素：上述所说的小点点就是物理像素。 b) CSS像素：编写网页时我们使用的像素就是CSS像素。 1) 浏览器在显示网页时，需要将CSS像素转换为物理像素，再呈现页面。 2) 一个CSS像素最终转为为几
CSS像素和物理像素（移动端完美视口）
weixin_46636430的博客
11-21 1159
CSS像素和物理像素
CSS中适配移动端完美视口像素记录
Voiceu的博客
11-24 524
拿iPhone6为例，ip6的物理像素是750px（均指宽度），查询得知完美适口的比例为2，即750px（物理像素）：375px（CSS像素） = 2：1 那么在电脑端制作一张宽为375px（CSS像素）的图片，加载到移动端，就可以充满屏幕，前提是meta设置为 meta name=“viewport” content="width=device-width <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
移动端Web页面设置理想视口
yakelande的博客
08-01 1112
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;   在网页的&lt;head&gt;中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。 其中： width=devi...
vue3 PC端和移动端字体和响应式都要兼容，布局和样式只用一块，不配置env环境变量
最新发布
07-26
我们面对的需求是：在Vue3项目中实现PC端和移动端兼容的响应式布局和字体适配，使用同一套样式代码，且不依赖环境变量配置。 思路： 1. 响应式布局：使用CSS媒体查询（Media Queries）来根据不同的屏幕尺寸应用...
前端学习笔记97-完美视口
weixin_45034895的博客
05-21 658
前端学习笔记97-完美视口meta调整像素比device-width总结 看代码， <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- <meta name="viewport" content="width=device-
HTML5移动端适配完美实现方法
07-22
它告诉浏览器视口宽度应与设备的物理宽度一致，初始缩放比例为1.0，最大缩放比例也为1.0，且用户无法手动缩放，从而确保页面保持原始比例并具有良好的可读性。 在移动端适配中，HTML5的元素也非常重要。rel=...
PC端视口特点、移动端视口
weixin_43750162的博客
08-17 1427
pc端视口的特点： 1,如果确定具体的宽高值, 当超出viewport的大小的时候会出现滚动条 2,如果设置的宽度为100%,档子元素宽高大于父容器的时候,会自动换行 3,如果不想 出现滚动条或者换行,可以将子元素设置为父容器的百分之比 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
移动端视口（布局视口、视觉视口、理想视口）
蟹黄堡
05-16 1936
视口 视口就是浏览器显示页面内容的屏幕区域。 视口的分类：布局视口、视觉视口、理想视口。 布局视口(layout viewport) 一般移动设备的浏览器都默认设置了一个布局视口，并且该视口最常见的分辨率为980px。 由于980px的宽度大于大部分手机屏幕的宽度，为了将页面显示完全，只能对原来的页面进行缩放，如果不进行缩放，那么就需要左右拖动来浏览。（大部分浏览器默认采用缩放方式） 视觉视口(visual viewport) 视觉视口是指用户正在看到的网页的区域。 用户可以通过缩放来查看网站
138_完美视口
述安的博客
08-29 277
移动前端开发之viewport的深入理解 移动端默认的视口大小是980px(css像素)，默认情况下，移动端的像素比就是980/移动端宽度，比如980/750，如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好，导致网页中的内容非常非常的小。编写移动页面时，必须要确保有一个比较合理的像素比，比如1个css像素对应2个物理像素，或者1个css像素对应3个物理像素。每一款移动设备设计时，都会有一个最佳的像素比，一般我们只需要将像素比设置为该值即可得到一个最佳效果，将像素比设置为最佳像素比
pc端布局的一点思考
weixin_34308389的博客
02-18 214
编写pc端页面需要注意些什么？ 1、自适应最小屏幕，在小屏幕上样式不能错乱。 在桌面屏幕各分辨率使用比例中可以看到各桌面分辨率的使用比例，日常pc端开发我们会考虑到适配1024宽度大小的屏幕。 对于管理系统，设置内容宽度最小为1024，这样当屏幕小于1024时，保证样式不会乱。 2、自适应更大的屏幕。 如果需要适应刚好一屏的页面，用百分比来设置元素宽度，而不是写死设计师给的宽度。 3...
PC端CSS布局汇总
weixin_33921089的博客
12-02 366
前言 此文章是 解剖CSS布局原理 的续集，之前那篇文章讲的都是理论，本文章讲具体的实例，根据自己对布局的理解与开发经验分为以下几类。 因为PC端和移动端布局差异较大，所以我将两端布局分开讲，本文章将针对PC端的布局进行讲解，以下代码只写关键代码。如果你发现你写了关键打代码还达不到效果，请检查是否写了不该写的样式。 为了提高网页性能，考虑...
vue中实现一个项目里兼容移动端和电脑端
hhb442的博客
03-12 3632
这种方案不是响应式方案，而是同一个项目（同一个ip和端口）移动端和pc端展示不同的页面，考虑到移动端的功能可能只是pc端的简化，所以是重新写移动端的界面（可能只是样式的调整，也可能是功能的简化）从上面的路由可以看出如果访问 ip:port 默认进的是pc端路由，那么如何让移动端访问 ip:port 进入 /mobile下的路由呢，首先只需要移动端路由和pc端路由不同，如下，移动端和pc端路由不同。的mounted()钩子函数中做如下判断，进行路由跳转。
前端---【移动端开发的屏幕适配】
m0_61307468的博客
07-14 3185
dpr = 物理像素 / 设备独立像素,适配场景：实际开发中上线后的移动端项目需要在不同的手机上供用户使用访问，不同的手机屏幕尺寸大小不一样。关键点：等比。pc端视口的默认宽度和浏览器窗口的宽度一致；在 css 标准文档中，视口也被称为：初始包含块； 它是所有 css 百分比宽度推算的根源；方法：拿到设计稿之后，设置布局视口宽度为设计稿宽度，然后直接按照设计稿给宽高进行布局即可。 优点：不用复杂的计算，直接使用图稿上标注的px值 缺点： 有些不希望被适配的东西，例如边框，也被适配了，导致比设计稿大的设
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
weixin_33968104的博客
06-20 1955
简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。 px和视口 媒体查询 百分比 自适应场景下的rem解决方案 通过vw/vh来实现自适应 一、px和视口 在静态网页中，我们经常用像...
移动端布局(二)关于视口
androidioskl的博客
12-31 1458
简单来说 <meta name="viewport" content="width=device-width,initial-scale=1.0">的解释 content属性值: width:可视区域的宽度，值可为数字或关键词device-width height:同width intial-scale: 页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别， maximum-
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值