当前位置: 首页 > news >正文

自助网站建设系统企业管理软件

自助网站建设系统,企业管理软件,松岗做网站价格,网站建设类岗位杭州一、一些概念 (一)、屏幕相关 1、屏幕大小 指屏幕的对角线长度,单位是英寸(inch)。常用尺寸有:3.5寸、4.7寸、5.0寸、5.5寸、6.0寸等 备注:1英寸(inch)2.54厘米&…

一、一些概念

(一)、屏幕相关

1、屏幕大小

指屏幕的对角线长度,单位是英寸(inch)。常用尺寸有:3.5寸、4.7寸、5.0寸、5.5寸、6.0寸等

备注:1英寸(inch)=2.54厘米(cm)

2、屏幕分辨率

     指屏幕在:横向、纵向上所拥有的物理像素点总数,一般表示用n * m表示

     例如:iPhone6的屏幕分辨率为750 * 1334

 注意:

3、屏幕密度(ppi)

又称屏幕像素密度,是指屏幕上每英寸里包含的物理像素点个数,单位是:ppi(pixels per inch)

ppi值才是真正衡量一块屏幕是否清晰的核心指标

PPI的计算方法是:PPI=开平方(X*X+Y*Y)/Z

(其中X,Y指长,宽像素数,Z指屏幕大小)。

例如iphone4s分辨率为640*960,屏幕大小为3.5英寸,它的PPI=开平方(960*960+640*640)/3.5=329.650

(二)、像素相关

1、物理像素

又称:设备像素,物理像素是一个长度单位,单位是px,1个物理像素就是屏幕上的一个物理成像点,就是屏幕中一个微小的发光物理元器件(可简单理解为超级微小的灯泡),是屏幕能显示的最小颗粒,它由屏幕制造商决定,屏幕生产后无法修改。

2、css像素

又称:逻辑像素,css像素是一个抽象的长度单位,单位也是px,它是为web开发者创造的,用来精确的度量web页面上的内容的大小,我们在编写css,js,less中所用的都是css像素(可以理解为:‘程序员像素’)

思考:代码中的css像素跟物理像素的比?

他们两个在2010年之前是一样,之后就不一样

3、设备独立像素

设备独立像素简称DIP或DP,又称屏幕密度无关像素

引言:在没有出现高清屏的年代,1个css像素对应1个物理像素,但自从高清屏问世,二者就不再是1对1的关系了

苹果公司,在2010年推出了一种新的显示标准:在屏幕尺寸不变的前提下,把更多的物理像素点压缩至一块屏幕里,这样分辨率会更高,显示效果会更加细腻,苹果将这种屏幕成为:Retina屏幕(视网膜屏幕),与此同时推出配备这种屏幕的划时代产品-iPhone4

设备独立像素的出现,使得即使在【高清屏】下,例如苹果的retina屏,也可以让元素有正常的尺寸,让代码不受到设备的影响,它是设备厂商根据屏幕特性设置的,无法更改

设备独立像素于物理像素关系

   普通屏幕下1个设备独立像素对应1个物理像素

   高清屏幕下1个设备独立像素对应N个物理像素

设备独立像素与css像素关系

   在无法缩放的情况下(标准情况下):1css像素=1设备独立像素,即:dpr=物理像素/设备独立像素

4、像素比

像素比(dpr):单一方向设备【物理像素】和【设备独立像素】的比例

5、像素之间的关系

在不考虑缩放的情况下(理想状态下):

普通屏(dpr=1):1css像素=1设备独立像素=1物理像素    2010之前

高清屏(dpr=2):1css像素=1设备独立像素=2物理像素

高清屏(dpr=3):1css像素=1设备独立像素=3物理像素

程序员写了一个width为100px的盒子,那么:

  代表100个css像素;

 若用户不进行缩放,则对应100个设备独立像素;

   在dpr为2的设备上,这100个css像素占据了100*2=200个物理像素(横向)

例如:iPhone6为例

物理像素:750px,

设备独立像素375px,

css像素:375px

(三)、图片高清显示

1、位图像素

位图和矢量图

  • n个像素点组成的。放大后会失真。(常见又:png,jpeg,jpg、gif)
  • PS等软件进行编辑
  • 位图像素可以理解为位图中的一个‘小格子’,是位图的最小单元

        举例:给你买鞋,一直给你买36码  

举例:你的脚多大,给你买多大的鞋  是根据数字关系现场绘图的

(四)、视口概念

视口(viewport)就是浏览器显示页面内容的屏幕区域

PC端视口:

在pc端,视口的默认宽度和浏览器窗口的宽度一致,在css标准文档中,pc端视口也被称为:初始包含块。

移动端视口

移动端视口可以分为布局视口、视觉视口、理想视口(完美视口)标准

1、布局视口

默认的布局视口容器是980px,对pc页面进行压缩,压到跟手机一样大小,就可以看了,只是元素看上去很小,只能手动去缩放,体验效果不好

2、视觉视口

视觉视口就是用户可见的区域,它的绝对宽度永远和设备屏幕一样宽,但这个宽度里包含的css像素值是变化的

例如:一般手机将980个css像素放入视觉视口中。

注意:布局视口经过压缩后,横向的宽度用css像素表达,就不再是375px,而是980px

描述一下iPhone6屏幕

  1. 1、物理像素:750px
  2. 2、设备独立像素:375px
  3. 3、css像素:980px

3、理想视口

与屏幕(设备独立像素)等宽的布局视口,称之为理想视口;让布局视口宽度与屏幕等宽(设备独立像素),靠meta标签实现

用户不需要缩放、滚动就能看到网站的全部内容

要为移动端设备单独设计一个移动端网站

开启理想视口的方法

<meta name='viewport' content='width=device-width' />

(五)、meta标签设置

 

   <!-- 设置完美视口大小  device-width   视口宽度和设备保持一致initial-scale  表示页面的初始缩放值,==>屏幕宽度(设备独立像素)/布局视口宽度user-scalable  是否允许用户缩放maxinum-scale=1.0, 最大允许缩放比例mininum-scale=1.0, 最小允许缩放比例--><meta name="viewport"content="width=device-width,initial-scale=1.0,user-scalable=nomaxinum-scale=1.0,mininum-scale=1.0 " />

    

(六)、多倍图的概念

咱们已经知道,在移动端里,1个css像素=1个设备独立像素=多个物理像素,那么对于开发来说,有什么影响呢?

问题:图片也是有分辨率的概念的,分辨率指的是物理像素还是css像素呢?

图片的分辨率:指的是图片在水平垂直方向需要显示多少个物理像素(发光小点)

如:图片的分辨率是200*200

表示图片显示在屏幕中需要用到200*200的物理像素(发光小点)

提问:以200*200分辨率的图片显示为例

如果图片需要显示完全,需要 多少*多少 的发光点

之前在pc端中,需要写 多少*多少 px?

  200css像素*200css像素,也就是在pc端1个css像素=1个物理像素

现在移动端,如果:iphone6,需要写 多少*多少 px?

200*200个物理像素

100*100个设备独立像素

100*100个css像素

例子:需求:在移动端iphone6中显示100*100px的盒子,里面装对应的图片

iphone6物理像素宽时750px,设备独立像素时375px,

1个设备独立像素=1个css像素=2个物理像素

 50*50设备独立像素=  50*50css像素    =100*100物理像素

100*100设备独立像素=100*100css像素=200*200物理像素

一倍图:

使用的是100*100 物理像素的图片

100*100分辨率图片==》对应屏幕中100*100的发光点(物理像素)==》对应css中50*50px

此时强行设置100*100px css像素,很明显对比起来就较为模糊

二倍图

使用200*200的图片

200*200分辨率的图片==》对应屏幕200*200的发光点(物理像素)==》css中100*100px

此时设置为100*100px,正好完美对应显示

结论

在现在移动端中,例如:在iphone6中,需要显示多少px的图片,为了不被强行放大, 需要使用宽高为2被分辨率的图片,显示更好的效果。

而这种使用的宽高为2倍分辨率大小的图片,称之为2倍图

实际开发过程中还存在2倍图、3倍图、4倍图之类的,但是具体使用哪一种看公司具体的需要

命名特点:

xxxx@2x.png   二倍图

xxx@3x.png    三倍图

在实际开发中如果给的是1倍图,那就多大写多大;如果是2倍图,那就是图片的大小/2 ;3倍图,就是图片的大小/3······;

(七)、移动端运行在移动设备上的产品

           移动设备:手机 、平板 ipad

           我们以后做的产品大部分都只需要适配ios系统和安卓系统即可

        响应式:

           在不同的设备上都能给用户再好的体验,不同设备,显示不同效果

        响应式开发

           随着移动互联网的兴起,不同设备的分辨率相差比较大,如果在不同设备上显示同一个页面,则用户体验差。

           响应式页面设计是一种方法,使得一个网站能够兼容多个终端,而不用为每个终端制作特定的版本。

           它使一个网站在任何类型的屏幕上,都能被轻松浏览使用,采用响应式设计,在不同设备中,网站会重新排列

           展现出不同的设计风格,以完美的适配任何尺寸的屏幕

        响应式设计原则(面试题)

           渐近增强

               基本需求==>更好体验

            优雅降级

               完备功能==>向下兼容

           移动优先的响应式布局采用的是渐进增强原则

二、移动端开发选择

   由于移动端设备的屏幕尺寸大小不一,会出现:同一个元素,在两个不同的手机上显示效果不一样(比例不同)。要想让同一个元素在不同设备上,显示效果一样,就需要适配,无论采用何种适配方式,中心原则永远是等比

(一)、移动端主流适配方案

1、单独制作移动端页面(主流)

为了在特定的设备上显示最好的视觉效果,大多的移动端产品都有PC端,和移动端两套不一样的网站。

其技术实现通常为:服务器根据浏览器请求的user-agent判断设备类型,然后返回(或重定向)对应的站点内容。

例如:京东商城、淘宝网、苏宁易购等

rem   flexible.js

vw  vh

2、响应式页面兼容移动端(其次)

媒体查询

常见于PC、移动等多端共用一套代码的场景,比如bootstrap站点、三星手机官网,星巴克官网

通过判断屏幕宽度来改变样式,以适应不同终端

缺点:制作麻烦,需要花费很大的精力去调兼容性的问题

只适用一些内容简单,要求不高的官网

(二)、移动端开发几个注意点

1、去除默认样式,可以用normalize.css(默认样式不去除,处理各浏览器对默认样式的不同解析),resize.css(直接把所有的默认样式都去掉,要用,你就自己重设)   

2、盒子模型采用box-sizing的属性,border-box属性值

3、超链接点击高亮背景的效果需要去除

-webkit-tap-highlight-color:transparent;

三、移动端常见实现方式

(一)、移动端的技术选型

1、单独制作移动端页面

百分比,flex,rem,vw

1>  流式布局

就是百分比布局,也称为非固定像素布局

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充,主要是设置宽度

一般配合以下属性使用,免得盒子里面的元素,被挤下来

max-width 最大宽度(max-height最大高度)  

min-width 最小宽度(min-height 最小高度)

2>、flex弹性布局
3>、rem+媒体查询布局
(1)、rem单位

相对单位,相对于html根元素的字体大小,通过更改html文字的大小,改变页面的大小

(2)、媒体查询(meidia Query):

作用:

@media查询,可以针对不同的媒体类型定义不同的样式

可以针对不同的屏幕尺寸设置不同的样式

语法:

     @media 媒体类型  关键字  (媒体特性){css}

           媒体类型(可以同时用多个媒体类型,用逗号隔开,这样他们之间就是或的关系)

                all  所有设备

                print  打印设备或打印预览

                screen  带屏幕的设备(电脑,手机)**

                speech  屏幕阅读器  

            关键字  and  not  only  来连接

将媒体类型或多个媒体特性连接到一起作为媒体查询的条件

and:可以将多个媒体特性连接到一起,相当于且的意思

not:排除某个媒体类型,相当于“非”的意思,可以省略

only:指定某个特定的媒体类型,可以省略

             媒体特性(必须要有小括号)

 width  页面可见宽度

                max-width  视口的最大宽度(视口小于指定宽度时就生效,小于等于xxxpx)

                min-width  视口的最小宽度(视口大于指定宽度时就生效)

                max-height  最大高度

                min-height   最小高度

                orientation:landscape  横屏

                orientation:portrait   竖屏

    常用的断点

样式切换的分界点,我们称其为断点,也就是网页的样式

尺寸范围

设备划分

 <768px

超小屏幕

max-width=768px

 >=768px~<992px

小屏幕

min-width=768px    max-width=992

        >=992px ~<1200px

中型屏幕  

min-width=992px     max-width=1200

>=1200px

大屏幕

min-width=1200px

   

<style>body {background-color: red;}/* 第一种方式  直接引入 *//* 在992px-768px之间设置的样式 */@media screen and (max-width: 992px) and (min-width: 768px) {body {background-color: orange;}}/* 可以简写,默认写了screen and */@media (max-width: 768px) {body {background-color: yellowgreen;}}</style><!-- 第二种方式:外接式,针对不同的界面效果,可以写不同的样式,分别引入,写的时候,最好从小到大来写语法:media="媒体类型 关键字 (媒体特性)--><link rel="stylesheet" href="./600.css"  media="screen and (max-width: 600px) " />
(3)、rem适配方案

按照设计稿与设备宽度的比例,动态计算并设置html根标签的font-size大小(媒体查询)

css中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为rem为单位的值

        根字体=(手机横向设备独立像素值=设计稿css像素值)/10        

        设计稿元素设计数值转成rem: 设计值/(设计稿宽度/10)  

例如:iPhone6,根字体=375/10=37.5px         以rem为单位,即1rem=37.5px

如果设计稿是375px     写一个100px*100px的盒子,用rem来表示   100px/(375px/10)=2.667rem

设计稿是固定的,根据设计稿来开发页面,用rem这个相对单位去根据设计稿设计的大小开发好页面后,再根据不同的手机设备独立像素去更改根标签字体的大小,就可以实现响应式的变化

手机横向设备独立像素值,可以用flexible.js计算,用里面的js去做处理

css元素的设计值换算用css中的Cssrem: Root Font Size去实现    

           px to rem & rpx & vw (cssrem)

(4)、flexible.js

=css像素)划分为10等份,但不同设备下,比例还是一致的。

只要确定当前html文字大小就可以了.

github地址:https://github.com/amfe/lib-flexible

官方文档地址:https://github.com/amfe/article/issues/17

vscode中直接安装)

px to rem & rpx & vw (cssrem)

Cssrem: Root Font Size

基准font-size(单位:`px`), default: 16,调整成75

例如主流设计稿大小为750px,主要将html文字的大小设置为75px,里面页面元素rem值:页面元素的px值/75,从而算出rem值

4>、混合布局(主流)

综上所有,一起使用,选取一种主要技术选型,其他技术为辅助(推荐)

rem适配—移动端开发的步骤

第一步:拿到多大的设计稿,将root font size 改成  :设计稿的大小/10

第二步:引入flexable.js  ,会动态的去修改html的字体大小          

第三步:正常根据设计稿的大小去开发,将所有的px值换算为rem的值

5>、vw、vh(未来的趋势)

vw也是百分比,只不过这个百分比只参考设备视口

vw(Viewport‘s width):1vw等于视口宽度的1%

vh(Viewport’s height):1vh等于视口高度的1%

vmin:vw和vh中的较小值

vmax:选取vw和vh中的最大值

 

(1)、750的设计稿:html{ font-size:13.3333vw }

1vw表示1%的屏幕宽度,而我们的设计稿通常是750px的,屏幕一共是100vw,对应的就是750px, 1vw=7.5px        那么1px就是0.13333vw,

同时我们知道另一个单位rem,rem是相对于html元素字体大小,放了方便计算,我们自定义html字体大小为100px,

通过上面的计算结果我们知道1px是0.13333vw,那么100px就是13.333vw了。

这样后面的用rem就很好计算了。13.333vw对应的是100px,然后我们就可以很愉快的写rem单位了,由于自定义的1rem=100px,

书写代码时,就是(设计图元素大小/100),单位是rem

如果750的设计稿设计一个盒子大小是200px,里面有字体大小50px,那么对应的就是,盒子宽高2rem,字体大小是0.5rem

(2)、1080设计稿:html{ font-size:9.259vw }

如果设计稿时1080px,屏幕是100vw,那么对应的1px=0.09259vw,rem根标签依然自定义取100px,那么就是1rem=100px,那么1rem=9.259vw。

如果1080的设计稿设计一个盒子大小是200px,里面有字体大小50px,那么对应的就是,盒子宽高2rem,字体大小是0.5rem

总结:

虽然还是vw布局,但还是用rem去写

1、无关屏幕的大小,反正100vw,就是屏幕的100%,用屏幕的大小作为固定值去换算相对单位

2、自定义一个rem跟px之间的换算比值,为了好算一般是1rem=100px,计算出vw跟rem,px之间的关系

例如750的设计稿:1font-size=100px=1rem=13.3333vw

3、后面750设计稿上的所有尺寸都用rem来算。例如200px*200px的盒子,就是2rem*2rem的盒子,也就是26.666vw*26.666vw的盒子。

用vw去开发

1、看设计稿是多大,自定义1rem=100px, 然后1px=xxxvw,    将html{font-size:xxxvw}

2、去更改root font size   ,更改1rem=100px

3、根据设计稿的大小,将px值写成rem

总结:

都是一个绝对值为参考值

   flexable.js是以设备独立像素为绝对值,去算rem的值

   vw是设备的视口的宽度为绝对值,去算rem的值

最终都是把设计稿中的px换算成rem

2、响应式页面兼容移动端

百分比,flex,rem,媒体查询,

媒体查询

以上已讲述

bootstarp框架

https://www.bootcss.com/

http://www.zhongyajixie.com/news/5974.html

相关文章:

  • 市政府网站集约化建设调研报告广州:推动优化防控措施落地
  • 广东深广东深圳网站建设成都本地推广平台
  • 做雨棚的网站seo模拟点击软件
  • 怎么做转载小说网站如何推广普通话
  • 哪个网站可以接工程做抖音seo查询工具
  • 批量做网站软件推广方案模板
  • 微商来分销系统百度ocpc如何优化
  • 互联网 网站建设价格上海网站建设推广服务
  • 单页网站开发seo快速建站
  • 线上店铺建站合肥网络公司seo
  • wordpress 隐藏链接插件seo是什么姓
  • 重庆秀山网站建设百度怎么推广自己的店铺
  • 公司做网站的费用怎么做账seminar怎么读
  • 做网站侵权吗网络营销方法有哪些
  • 网站备案要关多久网络建站
  • 设计素材网站哪个最好用怎么做公司网站
  • 云集网站建设公司网站优化推广教程
  • 做一些购物网站网站维护费用一般多少钱
  • 做网站哪些网络公司好房产网站建设
  • wordpress edcseo外推
  • 鹤岗市城乡建设局网站东莞营销网站建设推广
  • 的动态网站开发2023今日新闻头条
  • 网站建设模板删不掉国内免费域名注册
  • 济南免费做网站网络营销学什么
  • 怎么做二级网站域名旅游app推广营销策略
  • 张家口做公司网站应用宝aso优化
  • 网站 域名军事新闻俄乌最新消息
  • 开封市住房和城乡建设 网站百家联盟推广部电话多少
  • 如何做公众号微信推广上海谷歌seo推广公司
  • 做网站有哪些项目陕西seo优化