网站建设最基础的是什么,成都手机网站建设哪家公司好,做网站要服务器和什么软件,专业制作网站第一部分 响应式布局 1. 几个布局单位概念
PX: px像素#xff08;Pixel#xff09; 相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 PX特点 1. IE无法调整那些使用px作为单位的字体大小#xff1b; 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体…第一部分 响应式布局 1. 几个布局单位概念
PX: px像素Pixel 相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 PX特点 1. IE无法调整那些使用px作为单位的字体大小 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位 3. Firefox能够调整px和emrem但是96%以上的中国网民使用IE浏览器(或内核)。 EMem是相对长度单位。 相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置则相对于浏览器的默认字体尺寸。 EM特点 1. em的值并不是固定的2. em会继承父级元素的字体大小。 注意任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em16px。那么12px0.75em,10px0.625em。为了简化font-size的换算需要在css中的body选择器中声明Font-size62.5%这就使em值变为 16px*62.5%10px, 这样12px1.2em, 10px1em, 也就是说只需要将你的原来的px数值除以10然后换上em作为单位就行了。 所以我们在写CSS的时候需要注意两点 1. body选择器中声明Font-size62.5% 2. 将你的原来的px数值除以10然后换上em作为单位 3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。 也就是避免1.2 * 1.2 1.44的现象。比如说你在#content中声明了字体大小为1.2em那么在声明p的字体大小时就只能是1em而不是1.2em, 因为此em非彼em它因继承#content的字体高而变为了1em12px。 REM rem是CSS3新增的一个相对单位root em根em这个单位引起了广泛关注。 这个单位与em有什么区别呢区别在于使用rem为元素设定字体大小时仍然是相对大小但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身通过它既可以做到只修改根元素就成比例地调整所有字体大小又可以避免字体大小逐层复合的连锁反应。目前除了IE8及更早版本外所有浏览器均已支持rem。对于不支持它的浏览器应对方法也很简单就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子 p {font-size:14px; font-size:.875rem;} 注意 选择使用什么字体单位主要由你的项目来决定如果你的用户群都使用最新版的浏览器那推荐使用rem如果要考虑兼容性那就使用px,或者两者同时使用。 px 与 rem 的选择 对于只需要适配少部分手机设备且分辨率对页面影响不大的使用px即可 。 对于需要适配各种移动设备使用rem例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
2. 移动端开发现状-webkit WebKit 是一个跨平台的 Web 浏览器引擎苹果的 Safari、谷歌的 Chrome 浏览器都是基于这个框架来开发的。WebKit 还支持移动设备和手机包括 iPhone 和 Android 手机都是使用 WebKit 做为浏览器的核心。
WebKit 是一个开源项目其起源可追溯到 K Desktop Environment (KDE)。WebKit 项目催生了面向移动设备的现代 Web 应用程序。虽然设备本身的能力和形态因素都相当重要但移动用户最热衷的仍然是内容。如果移动用户可用的内容只是 Internet 用户可用内容的一个很小的子集那么用户体验充其量也只能划分为二等。
WebKit 还应用在了桌面的 Safari 浏览器内该浏览器是 Mac OS X 平台默认的浏览器。不管我们讨论的是桌面版本还是 iPhone 或 Android 上的浏览器引擎WebKit 均优先支持 HTML 和 CSS 特性。实际上WebKit 还支持尚未被其他浏览器采纳的一些 CSS 样式 — 这些特性正在得到 HTML5 规范的考虑。
3. 移动端屏幕现状 4. 固定布局、流式布局、弹性布局、自适应布局、响应式布局
固定布局/静态布局 用像素绝对单位作为单位 -确定小屏幕显示不全大屏幕有无意义空白 流式布局 流式布局Liquid的特点也叫Fluid) 是页面元素的宽度按照屏幕分辨率进行适配调整但整体布局不变。代表作栅栏系统网格系。 网页中主要的划分区域的尺寸使用百分数搭配min-*、max-*属性使用例如设置网页主体的宽度为80%min-width为960px。图片也作类似处理width:100%, max-width一般设定为图片本身的尺寸防止被拉伸而失真。 布局特点屏幕分辨率变化时页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】 设计方法使用%百分比定义宽度高度大都是用px来固定住可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。 这种布局方式在Web前端开发的早期历史上用来应对不同尺寸的PC屏幕那时屏幕尺寸的差异不会太大在当今的移动端开发也是常用布局方式但缺点明显主要的问题是如果屏幕尺度跨度太大那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义但是高度和文字大小等大都是用px来固定所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长但是高度、文字大小还是和原来一样即这些东西无法变得“流式”显示非常不协调。 弹性布局 弹性布局 -用em和rem作为单位根据字体百分比强制放大缩小页面 自适应布局 只响应几个预设的分辨率模板只有重新刷新才会根据根据当前切换不同的模板 预设了一些布局样式根据用户机型判断展示样式 -可通过媒体查询是否一镜到底判断是自适应布局有分域名还是响应式布局 自适应布局预设几个分辨率模板但其实都把这几个布局都做了的很少毕竟还有几个布局增加了开发工作量大部分只做2-3个布局。 响应式布局 一个页面根据宽度自动更改布局和样式 ---根据宽度无缝衔接 总结希望页面的内容可以完美的适应任何尺寸的屏幕 2010年CSS发布了响应式布局苹果发布了iphone4出现了高清屏之前只有像素屏 响应式网站Starbucks Coffee Company 响应式 Vue 页面布局组件-Element Plus https://zhuanlan.zhihu.com/p/18434713883 Vue 3 的响应式系统基于 JavaScript 的 Proxy 对象实现Vue 2 使 Object.defineProperty。 Proxy 的优势 支持动态新增属性无需 Vue.set支持数组索引和长度变化性能更好无需递归遍历对象 响应式设计中为不同设备设置“断点”是常见做法。以下是常见设备的屏幕宽度断点 设备类型 常用断点范围 超小屏幕 手机 max-width: 576px 小屏幕 平板 min-width: 577px 和 max-width: 768px 中等屏幕 桌面 min-width: 769px 和 max-width: 992px 大屏幕 大桌面 min-width: 993px 和 max-width: 1200px 超大屏幕 min-width: 1201px 前端Vue3项目响应式布局实战——基于Flex布局和媒体查询的响应式布局设计_vue3响应式布局-CSDN博客 第二部分 Vue及基于vue的前端UI框架
1. vue3 Vue读⾳ /vjuː/类似于 view不要读错。是一套用于构建用户界面的渐进式 MVVM 模型框架。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层不仅易于上手还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时Vue 也完全能够为复杂的单页应用提供驱动。 Vue 是⼀个渐进式的前端框架什么是渐进式的呢 简单来说可以理解为轻量级Vue.js 核⼼库只提供了基础功能让你在使用 Vue 作为开发框架时不需要⼀次性引入过重的依赖可以先使用核⼼功能如果应用再进⼀步升级变得更复杂以后可以逐渐的引入 Vue 生态的其他组件例如 vue-router、vuex、 Axios 等而不是⼀股脑的⼀次性全塞进来。 单页 Web 应用single page web applicationSPA就是只有一张 Web 页面的应用。单页应用程序SPA是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的 Web 应用程序。浏览器一开始会加载必需的 HTML、CSS 和 JavaScript所有的操作都在这张页面上完成都由 JavaScript 来控制。
2. 基于vue的UI框架 3. UView UI ---unapp的ui组件-
uView UI---uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架
uView UI是全面兼容nvue(native vue)的uni-app生态框架全面的组件和便捷的工具会让您信手拈来如鱼得水.
nvue介绍 | uni-app官网
介绍 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 uView2.0是继1.0以来的一次重大更新2.0已全面兼容nvue为了这个最初的梦想我们曾日以夜继挑灯夜战闻鸡起舞。您能看到屏幕上的字却看不到我们洒在键盘上的泪。 uView来源于社区也回归到社区正是有一群热爱uni-app生态的同学推着它前行而我们也一如既往的承诺uView永久开源永远免费。 关于uView的取名来由首字母u来自于uni-app首字母uni-app是基于Vue.jsVue和View(延伸为UI、视图之意)同音同时view组件是uni-app中 最基础最重要的组件故取名uView表达源于uni-app和Vue之意同时在此也对它们表示感谢。 #适用领域 uView是uni-app生态专用的UI框架uni-app 是一个使用 Vue.js 开发所有前端应用的框架开发者编写一套代码 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。但目前除微信小程序其它小程序平台的兼容可能存在一些问题后续会针对这方面持续优化。 4. Element Plus
一个 Vue 3 UI 框架 | Element Plus
Overview 组件总览 | Element Plus 5. Vant3.0 --https://www.bookstack.cn/read/vant-3.0-zh/%E4%B8%9A%E5%8A%A1%E7%BB%84%E4%BB%B6.md
开发指南 - 介绍 - 《Vant 3.0 移动组件库文档(Vue 3版)》 - 书栈网 · BookStack
业务组件 - 《Vant 3.0 移动组件库文档(Vue 3版)》 - 书栈网 · BookStack
Vant轻量、可靠的移动端 Vue 组件库
Vant 是有赞前端团队开源的移动端组件库于 2017 年开源已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务对外服务十多万开发者是业界主流的移动端组件库之一。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本并由社区团队维护 React 版本和支付宝小程序版本。
特性
提供 60 多个高质量组件覆盖移动端各类场景性能极佳组件平均体积不到 1kbmingzip单元测试覆盖率 90%提供稳定性保障完善的中英文文档和示例支持 Vue 2 Vue 3支持按需引入支持主题定制支持国际化支持 TypeScript支持 SSR 6. vue脚手架 第三部分 富文本编辑工具
秀米编辑器官网_微信公众号排版和H5制作 第四部分 微信开发
