【第十六篇】 理想视口&pc端浏览器&移动端浏览器&元素单位

最新推荐文章于 2024-04-06 11:38:04 发布
最新推荐文章于 2024-04-06 11:38:04 发布
阅读量192 收藏
点赞数
文章标签： javascript css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SYQ15544423296/article/details/125190558
版权
VScode关键点
类型快捷方式关键字举例
理想视口viewport理想视口　
width=device-width网页宽度等于设备的宽度　
initial-scale=1.0是否缩小页面　
一个手机或平板浏览器的布局宽度是在980px或1024px
PC端浏览器chrome、safari、firefox、IE
移动端浏览器类型Gecko内核,css前缀为"-moz-",代表 firefox
WebKit内核,css前缀为"-webkit-"，代表 chrome、苹果、微信等
Presto内核,css前缀为"-o-",代表Opera(欧朋)
Trident内核,css前缀为"-ms-",代表IE
元素单位em 单位是根据父元素大小来相乘的　　
rem 单位依据根元素
html:font-size:20px;决定		　　
从未转生的史莱姆
关注
css之移动端适配方案rem与less&媒体查询响应式布局&bootstrap
qq_66318904的博客
03-25 1778
less是一个css预处理器，less文件后缀是.less。扩充了css语言，使css具备一定的逻辑性，计算能力。注意：浏览器不识别less代码，目前阶段，网页要引入对应的css文件vscode插件：easy less，保存less文件后自动生成对应的css文件。
CSS第九章 移动端布局-Viewport视口/移动端适配方案
晓葉斑比
06-04 1913
Viewport视口移动端模拟器访问的网站的PC端和移动端是否用同一代码实现？Viewport视口ViewPort设置移动端适配方案1. 流式布局(百分比布局)流式布局原则2. rem布局(等比缩放布局) 移动端模拟器 切换平台之后，一定要重新刷新浏览器 访问的网站的PC端和移动端是否用同一代码实现？ 1.大一点的网站的PC端和移动端都是分开开发的，各有一套代码。 访问淘宝网 ->后端检测当前设备 ->如果是PC端 ->www.taobao.com 访问淘宝网 ->后端检
浏览器视口
weixin_30802273的博客
06-05 390
css布局受浏览器视口的限制 桌面端浏览器只有布局视口的概念 桌面端浏览器像素比 1px对应css像素为1px 移动端浏览器有布局视口、可视视口、理想视口三个概念。 通过document.documentElement.clientWidth/Height可以获得浏览器的布局视口宽口。 通过screen.width/height可以获取理想视口的宽度或高度 通过meta标签设置视口： ...
移动端页面基础-理想视口
XXX51129的博客
12-01 246
布局视口宽度 = 视觉视口宽度 = 设备宽度( = 内容宽度) 自定义用户代码段 点击设置——》用户代码片段 选择新建全局代码片段文件： 输入新建代码片的名字： 然后按“Enter”键（名字可以任取，我的是‘html’） 把默认生成的示例代码删掉，复制进新的代码，如下： 复制新的代码，保存： 需要复制的代码如下： { "html": { "prefix": "html", "body": [ "<!DOCTYPE html>", ...
内网穿透技术和移动端理想视口
m0_60322879的博客
06-02 627
1
移动端适配、移动端事件，理想视口
Amingluo的博客
08-03 2190
禁止滚动条 取消滚动条的默认样式：html{height:100%;overflow:hidden;} body{height:100%;overflow:hidden;} 并在js中写入：document.addEventListener('touchstart',function(event){
Web移动端开发：视口，布局视口 layout viewport，视觉视口 visual viewport，理想视口 ideal viewport
我就知道你会来，我们一起进步吧！
03-10 504
1.视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。
十五、less语法、移动端浏览器及内核分析、viewport、移动端适配方案、移动端重置样式、移动端特殊处理、移动端其他适配方案设备像素、独立像素和css像素、
qq_52426181的博客
12-05 412
一、less语法 1、注释 less共有两种注释风格。 标准的CSS注释，多行注释 /* comment */ ，会保留到编译后的文件。 单行注释 // comment，只保留在less源文件中，编译后被省略。 // 单行注释，这种只会在less文件中存在，不会编译到css里面去 /* 注释内容，可以被编译到css文件中去的 */ 2、导入 @import "导入文件的地址"; .css 后缀名不能省略，引入 .less 文件可以省略扩展名 3、变量 定义 @变量名:值; 使用 ​
23-移动端布局
weixin_55101030的博客
09-21 559
移动端布局
前端面试之移动端适配篇
BIGDgreen
05-13 6177
关于像素，括号中为别名 设备像素（物理像素） DP（Device Pixel），显示屏上的像素点，出厂即确定。 设备无关像素（设备独立像素） DIP（Device Independent Pixel），缩放比为1时，设备独立像素也等于CSS像素（逻辑像素）。我们通过CSS和javascript代码设置的像素都是逻辑像素。在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位，px是一个相对单位，相对的是设备像素(device pixel)。显示器上的小色框就是像素
移动端理想视口（第二十三天）
Z2908039948的博客
02-27 193
移动端视口
获取浏览器视口的方法
windows编程
11-27 831
获取浏览器视口的方法   function getView(){     var width = window.innerWidth;     var height = window.innerHeight;     if(typeof width != 'number'){         if(document.compatMode == 'CSS
关于移动端理想视口的一些概念和想法
huangfengnt的博客
12-21 140
当屏幕宽度>设计稿（750px）的时候，假如这个屏幕宽度是1000，他把布局视口也成了1000，这时的设计稿宽度小于布局（画布）宽度，他计算的缩放比例是针对750px这个值的，但是缩放是针对整体画布的，当设计稿750px*缩放比例（4/3）达到屏幕宽度的时候，整个画布宽度是1000*4/3，难怪超出了屏幕。当屏幕宽度>=设计稿的时候，将设计稿宽度（750）赋值给布局视口（画布），实际的屏幕假设还是1000，缩放比例是4/3，画布和设计稿同步放大到1000，三者统一。不知道对不对，先写着再说。
移动端适配——视口概念
m0_73861113的博客
11-01 318
三分钟带你搞懂：移动端适配中视口概念
移动端开发之视口
HXL521666的博客
11-08 295
视口：浏览器显示页面内容的屏幕区域。 视口的分类：布局视口、视觉视口、理想视口。 为了解决早期PC端网页在手机上显示的问题，移动端浏览器都默认设置了一个布局视口。 IOS、Android基本都将布局视口分辨率设置为980px，所以PC上的网页大多也能在手机上呈现，但是网页元素看上去会非常小，一般可以通过手动缩放网页。 视觉视口 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。 理想视口 发明者：史蒂夫.
媒体查询、理想视口及移动端单位
karry_yuan的博客
04-14 218
媒体查询、理想视口及移动端单位
【移动端网页布局】移动端网页布局基础概念 ② ( 视口 | 布局视口 | 视觉视口 | 理想视口 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-22 945
一、视口 1、布局视口 ( 网页大小 | 网页大小 > 设备大小 ) 2、视觉视口 ( 设备大小 | 网页大小 > 设备大小 ) 3、理想视口 ( 网页大小 = 设备大小 )
移动端自定义代码片
Q_Zkok的博客
11-20 244
{ "html":{ "prefix": "html", "body": [ "<!DOCTYPE html>", "<html>\n", "<head>", "\t<meta charset=\"UTF-8\">", "\t<meta name=\"viewport\" content=\"width=device-w...
什么是布局视口和视觉视口及理想视口
最新发布
qq_42931285的博客
04-06 362
布局视口和视觉视口及理想视口
vue pc端浏览器大小不同px怎么
09-20
比如，当浏览器窗口宽度大于等于768像素时，可以设置元素宽度为100%，而当浏览器窗口宽度小于768像素时，可以设置元素宽度为50%。 通过媒体查询，可以根据浏览器窗口大小动态地调整样式，以适应不同大小的浏览器。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值