移动端初始化页面

最新推荐文章于 2022-08-30 10:24:12 发布

转载最新推荐文章于 2022-08-30 10:24:12 发布 · 275 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/JerryWang24/p/5026206.html

本文探讨了网页响应式布局的实现方法，介绍了如何通过设置视口宽度、初始缩放比例及字体大小来确保网页在不同设备上的适配性。通过调整设备像素比，使得页面在各种屏幕尺寸下都能保持良好的视觉效果。

;(function(){
var iScale = 1,viewW = 0;
iScale = iScale/window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + ',user-scalable=no" />');
viewW = document.documentElement.clientWidth;
viewW = viewW > 1640 ? 1640 : viewW;
document.getElementsByTagName('html')[0].style.fontSize = viewW / 16 + 'px';
})(window);

转载于:https://www.cnblogs.com/JerryWang24/p/5026206.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

a13520165516

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue-移动端开发笔记1---项目的创建初始化

zzxhahaha的博客

01-22

394

文章目录前言一、项目初始化1：使用 Vue CLI 创建项目2：启动项目3：创建git仓库二、使用步骤1.引入库2.读入数据总结前言 vue +vant开发移动端 提示：以下是本篇文章正文内容，下面案例可供参考一、项目初始化 1：使用 Vue CLI 创建项目 1：Run npm i -g @vue/cli to update! 2：启动项目启动项目： npm run derve 界面： 3：创建git仓库去除所有对勾：测试公钥能否使用：自动：init的提交..

vuecli3x移动端初始模版

08-10

VueCLI3.x是Vue.js官方提供的一个快速搭建项目开发环境的工具，它极大地简化了Vue项目的初始化过程。在这个“vuecli3x移动端初始模版”中，开发者可以找到一个已经配置好的基础架构，用于开发移动端应用。以下是这个...

参与评论您还未登录，请先登录后发表或查看评论

初始化移动端样式

sunshine的博客

12-01

4206

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin:0; padding:0; } a { text-decoration: none; } ul,ol { margin: 0; paddin

移动端页面初始化

weixin_33997389的博客

08-06

140

html: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> css: *{ padding: 0; margin: 0; } html{...

移动端初始化css

01-23

常用移动端公共css

移动端 项目初始化

啊对对对的博客

09-02

279

使用 Vue CLI 创建项目如果你还没有安装 VueCLI，请执行下面的命令安装或是升级： npm install --global @vue/cli 在命令行中输入以下命令创建 Vue 项目：　　vue create xxxxx 然后配置各种你需要的插件加入 Git 版本管理 (1)创建远程仓库 GitHub 码云 Coding ... (2)将本地仓库推到线上...

移动端初始化样式

weixin_42060658的博客

12-02

647

@charset "utf-8"; /* 移动端样式初始化 */ * { -webkit-tap-highlight-color: transparent; /* 点击高亮显示的颜色*/ -webkit-text-size-adjust:none; /* 谷歌浏览器字体默认大小的缩放 */ } body { background-color: #fff; font-family: ...

vue实现设置载入动画和初始化页面动画效果

10-16

利用Vue.js实现加载动画和页面初始化动画效果，可以让整个应用的页面切换更加平滑和吸引人。在实现加载动画的时候，一个简单且常见的做法是在HTML页面的标签内插入一个带有样式的元素。这个元素内可以包含一些用...

jQuery移动web开发中的页面初始化与加载事件

10-23

页面初始化与加载事件是web开发中的关键环节，它们能够帮助开发者对页面加载过程中的各种状态进行监听和控制，以实现更加丰富和流畅的用户体验。页面初始化事件主要包括`pagebeforecreate`和`pagecreate`两种类型...

jQuery移动端图片上传组件

10-22

在本文中，我们将详细介绍一个利用jQuery技术构建的移动端图片上传组件，它涵盖了客户端图片压缩和文件上传服务端的实现。这个组件利用了现代浏览器提供的File API和Canvas API来实现客户端图片处理，同时结合服务端...

Vue.js实现移动端短信验证码功能

12-29

现在的短信验证码一般为4位或6位，则页面中会相应的显示4个或6个文本框，如图所示当点击注册进入到输入验证码页面的时候，第一个框自动获取光标，依次输入，不可直接输入第三个或第四个框的值， input输入框是循环出来的，代码如下： <div class=sms_input> <div v-for=n><input v-if=sms.show[n-1] disabled=true v-model=sms.msg[n-1]></div> <div><input v-if=sms.show[sms.numbers-1] v-mode

移动端项目初始化设置（HTML/CSS）

weixin_41601794的博客

03-29

495

1.normalize.css 2. /* 初始化 */ body { min-width: 320px; max-width: 540px; margin: 0 auto; font: normal 14px/1.5 PingFangSC-regular, Tahoma, 'Lucida Grande', Verdana, 'Microsoft Yahei', STXihei, hei; color: #000; background: #f2f2f

移动端学习之初始化-angular4的学习

Purse的博客

01-07

683

最近在学习angular4感觉也没有那么难啦，好奇移动端到底可以做出啥，继续学习中……

移动端初始化准备

TJ_Dom的博客

07-29

186

1. html页面的设置：  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  <link rel="stylesheet" href="assets/css/normalize.css"&gt

PC端和移动端初始页面

This is HuangWenJun' 优快云.

07-20

248

PC端： <!DOCTYPE html> <html lang="zh-cn"> <head>  <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> &l...

H5移动web — 初始化文件

黑白两客

04-05

333

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Correct the line height in all browsers. * ...

移动端h5项目初始化

weixin_43894639的博客

03-06

1053

移动端项目基础搭建

移动端项目代码初始化

RistonTea的博客

09-25

1314

移动端项目代码初始化 1.在index.html中，metal标签增加属性（minimum-scale=1.0,maximum-scale=1.0,user-scalable=no）,要求移动端设备，用户去通过手指去放大缩小这样的操作是无效的，它的页面比例始终是1:1； <meta name="viewport" content="width=device-width,initial-...

【前端】移动端布局基础

我的的博客哦

08-30

2423

🔰视口：就是浏览器显示页面内容的屏幕区域。🔰视口可分为布局视口，视觉视口，理想视口。🔰我们移动端布局想要的理想视口就是手机屏幕有多宽，我们的布局视口就有多宽。🔰想要理想视口，我们需要给我们的移动端页面添加meta视口标签。

css 初始化移动端

最新发布

09-06

<think> 我们正在讨论CSS移动端初始化。根据用户需求，需要介绍CSS进行移动端初始化的常见方法。 移动端初始化通常包括：重置默认样式、设置盒模型、设置基础字体、防止高亮、去除默认外观等。常见的移动端初始化CSS代码（也称为reset或normalize）通常包含以下部分： 1. 设置盒模型为border-box，便于控制元素尺寸。 2. 清除默认内外边距。 3. 设置基础字体和字体抗锯齿。 4. 禁止长按链接和图片弹出菜单。 5. 去除输入框和按钮的默认样式。 6. 禁止用户选中文字。 7. 设置页面高度100%等。下面是一个常见的移动端初始化CSS示例： </think> ### CSS移动端初始化方法 移动端CSS初始化主要解决设备差异、默认样式和交互优化问题，核心方法如下： #### 1. **视口配置** ```html <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> ``` - `width=device-width`：匹配设备宽度 - `initial-scale=1`：初始缩放比例 - `user-scalable=no`：禁用缩放（根据需求可选）[^1] #### 2. **盒模型重置** ```css * { margin: 0; padding: 0; box-sizing: border-box; /* 包含padding/border在内计算宽度 */ } ``` #### 3. **字体与排版优化** ```css body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; /* 字体抗锯齿 */ line-height: 1.5; color: #333; } ``` #### 4. **交互元素重置** ```css a { text-decoration: none; color: inherit; } input, button, textarea { border: 0; outline: none; background: none; -webkit-appearance: none; /* 去除iOS默认样式 */ } ``` #### 5. **图片与媒体处理** ```css img { max-width: 100%; /* 响应式图片 */ height: auto; vertical-align: middle; /* 消除底部空隙 */ } video { object-fit: cover; /* 视频自适应 */ } ``` #### 6. **移动端特有优化** ```css html { -webkit-tap-highlight-color: transparent; /* 禁用点击高亮 */ } body { -webkit-overflow-scrolling: touch; /* 启用弹性滚动 */ } ``` ### 完整初始化示例 ```css /* reset.css */ * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* 禁止字体缩放 */ -webkit-tap-highlight-color: transparent; } body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.5; color: #333; background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a, button, input, textarea { -webkit-tap-highlight-color: rgba(0,0,0,0); } img { display: block; max-width: 100%; } ul, ol { list-style: none; } ``` ### 最佳实践建议 1. **使用Normalize.css** 推荐引入第三方库作为基础： ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"> ``` 它保留有用默认值，修复浏览器兼容性问题[^2] 2. **REM适配方案** ```css html { font-size: calc(100vw / 7.5); /* 750px设计稿: 1rem=100px */ } ``` 3. **设备像素比处理** 使用`image-set()`适配高清屏： ```css background-image: image-set( "img.png" 1x, "img@2x.png" 2x ); ```