现在只要是做互联网营销的都对小程序开发不陌生，而且现在我们生活中很多人都在使用着小程序，比如我们使用外卖小程序、订水小程序、共享单车小程序、餐饮服务小程序等等，可以说现在小程序已经出现在了我们生活中的方方面面，不过现在很多企业也通过H5页面进行一些活动的营销，这2者之间有什么区别呢？ 首先大家要明白这两者的区别，小程序是依赖于app来进行使用的，比如微信小程序、支付宝小程序、百度小
# HTML5 PC端聊天页面Demo开发指南
随着互联网技术的不断发展，HTML5已经成为了构建现代Web应用的核心技术之一。本文将通过一个简单的HTML5 PC端聊天页面Demo，介绍如何使用HTML5、CSS3和JavaScript来实现一个基本的聊天功能。我们将涵盖前端页面的构建、样式设计、以及基本的交互逻辑。
## 1. 项目结构
首先，我们需要创建一个简单的项目结构，如下所示：
DIV CSS宽度width样式属性CSS 宽度是指通过CSS 样式设置对应div宽度，以下我们了解传统html宽度、宽度自适应百分比、固定宽度等宽度知识。传统Html 宽度属性单词：width 如width="300";CSS 宽度属性单词：width 如width:300px;一、Width语法结构知识： - TOP.divcss5{W
rem：css3的一个相对长度单位。相对于html元素的font-size计算值的倍数。即1rem 等于一倍的html元素的font-size值。一、@media+rem1. @media媒体查询， 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 上述代码中，第
场景1 移动端和pc端风格类似，内容可复用： 直接媒体查询 @media screen and (max-width: ***px)； 根据屏幕大小设置样式 场景2 风格差别比较大，内容不可复用，但接口可复用； 放在同一工程下，新建手机端文件夹，编写相应路由。 在app.vue页面编写，根据打开页面 ...
转载
2021-11-03 19:27:00
2459阅读
2评论
一. 移动端适配1.安装两个插件库 lib-flexible和px2rem-loader flexible.js是淘宝官方H5移动适应解决方案 px2rem会在项目编译的过程中根据根结的font-size值将我们项目css中的px单位转成rem， 其中不需要转成rem的可以写成PX ，UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内，打包适配时不会读取相关css,
Vue 移动端、PC 端适配可以使用 lib-flexible、amfe-flexible、postcss-pxtorem、postcss-px2rem 和 postcss-px-to-viewport 这几个插件。 &n
一、使用rem作为单位
html { font-size: 100px; }
@media(min-width: 320px) { html { font-size: 100px; } }
@media(min-width: 360px) { html { font-size: 112.5px; } }
@media(min-width: 400px) { html { font-size
https://gitee.com/eric167/pc-rem-demo
原创
2021-07-31 16:04:37
1029阅读
前言现在很多前端项目都是移动优先，要不就是移动端样式也需要一套。总之，移动端的样式适配是少不了的。1、布局Bootstrap 的栅格系统，CSS的flex布局，grid布局，都能通过调整布局来适配移动端的窄屏幕2、CSS媒体查询使用CSS媒体查询，设定移动端的样式例如：@media screen and (max-width: 425px) {}
@media screen and (min-wi
解决移动端适配的3种方法(响应式布局)
1.概述 做移动端页面的时候，经常会遇到移动端的适配这个问题，但是并没有认真分析过是如何适配各种机型的。 适配的根本原理其实就是将设计稿按一定的比例在不同的手机上实现。 在分析移动段适配之前首先要了解一下rem, css3的一个相对长度单位。既然是相对长度，那就有一个参照体了，rem就是相对于ht
转载
2023-08-26 14:46:44
265阅读
vue项目pc端和移动端适配1、pc端适配一、样式中根据设计稿确定缩放比例（可以设置全局或者部分页面）二、监听窗口大小改变，设置根字体大小 created() {
// 获取当前设备的宽度，设置rem的根字体大小
let width = window.innerWidth;
width = width <= 1200 ? 1200 : width;
const htmlObj = d
HTML5的出现让移动平台的竞争由系统平台转向了浏览器之间：移动端的IE、Chrome、FireFox、Safari，亦或是新出现的浏览器，谁能达到在移动端对HTML5更好的支持，谁就能在以后的移动应用领域占据更多的市场。现在我们怎么装APP有了HTML5以后怎么装APP更灵活、更方便的app使用及安装方式将成为HTML5在移动平台上大放异彩的保障之一。下面列举HTML5适合移动应用开发的几大特性
自适应（% rem vw/vh ）响应式 这种适配方案通常来说一套代码，多端适用。是一种用来为各种分辨率和设备性能优化视觉体验的技术方案。多年前非常流行的Bootstrap就是一套非常好的响应式UI框架。主要通过媒体查询，弹性布局等手段来为从移动端到PC端由小变大的不同分辨率提供可伸缩性的页面布局效果。同样也会出现不同分辨率下呈现功能内容多少不同的现象。但总体会遵循主要内容永远保留的原则。%适配优
1. 什么是移动web用于展示在移动设备上的网页(web)，称之为移动端页面。 移动设备泛指手机、平板等设备。2. 如何调试移动web页面真机调试：需要服务器环境，网络环境，以及多部手机。 :point_right: 目前还没有学习服务器技术，网络环境也不具备，所以暂时无法进行真机调试。浏览器模拟：一些浏览器为前端开发者提供了真机调试模拟环境。例如：chrome。 打开开发者工具，点击手机图标即可
转载
2023-08-01 15:29:37
492阅读
手机共通问题问题一:用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?经研究发现是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页字会非常小,所以苹果就把iPhone 4的960640分辨率在网页里只显示了480320,这样devicePixelRatio＝2;现在android比较乱,有1.5/2/3等,想让图片在手机里显示更为清晰必须使用2x的
记得第一次写移动端页面时，本以为就按着效果图就好了，没想到出了很多问题，后来看了网上的一些文章，就试着用媒体查询去各种写样式，但是，总的感觉就是太累，太浪费时间，主要最后出来的效果还不太理想，所以，这种“凭眼神”的方式写页面不是长久之计，决定彻底总结一次，把在各处学到的，自己领悟到的全部清晰罗列，理清思路，这样以后就会越来越专业啦。。。ps：这是一篇很绕很绕的博客。。首先，还是要先认识移动端和浏览
M站、h5、PC端、移动APP等这些都是前端开发最长接触到的，今天我就大概的聊一聊他们吧！ M站：M站一般是指手机网页端的页面，也就是mobile移动端 H5：H5，是HTML5的简称，他是一种高级的网页技术，最大的优点之一就是在移动设备上支持多媒体。我们平时看到的邀请函、幻灯片、小游戏......都是H5网页，他跟我们平时上网看到的那些网页本质上没有任何区别 pc端：PC全
转载
2023-07-06 13:48:26
901阅读
目录一、前言 二、表格标签1.主体表格 2.表头表格 3.表格标签的属性4.合并单元格三、列表标签1.无序列表（重点）2.有序列表3.自定义列表四、表单标签 一、表单域 二、表单控件（重点）1.Input输入标签2.lab标签 3.select下拉标签4.textarea文本域标签 5.案例一、前言 &nb
转载
2023-07-12 17:52:11
457阅读
一、背景 现在市场上移动设备的屏幕尺寸、分辨率、屏幕密度等因素各式各样，尽可能做到所有设备都自适应，只用一套样式布局来适配所有设备。二、适配最终效果在不同分辨率的手机上，页面整体布局自适应，不会出现页面的情况；在不同分辨率的手机上，字体、宽高、间距、图片大小能够和高保真近视一致。三、移动端相关的知识点3.1 关于设备屏幕的像素：物理设备的显示屏最小组成单位，又称物理像素，
